回答編集履歴
3
調整
test
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
インラインsvg内の要素の属性をいじる場合は[setAttributeNS](https://developer.mozilla.org/ja/docs/Web/API/Element/setAttributeNS)を利用ください
|
|
2
2
|
|
|
3
3
|
# 参考
|
|
4
|
+
※調整して簡素化しました
|
|
4
5
|
```javascript
|
|
5
6
|
<script>
|
|
6
7
|
window.addEventListener('DOMContentLoaded', ()=>{
|
|
7
|
-
const svg=document.querySelector('#svg');
|
|
8
8
|
const circle=document.querySelector('#circle');
|
|
9
9
|
const a=document.createElementNS('http://www.w3.org/2000/svg','a');
|
|
10
10
|
a.setAttributeNS('http://www.w3.org/1999/xlink','xlink:href','https://teratail.com/');
|
|
@@ -12,11 +12,7 @@
|
|
|
12
12
|
a.appendChild(circle);
|
|
13
13
|
});
|
|
14
14
|
</script>
|
|
15
|
-
<svg id="svg"
|
|
16
|
-
|
|
15
|
+
<svg width="200" height="200" type="image/svg+xml" >
|
|
17
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
18
|
-
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
19
|
-
version="1.1">
|
|
20
16
|
<circle id="circle" cx="100" cy="100" r="50" fill="red"/>
|
|
21
17
|
</svg>
|
|
22
18
|
```
|
2
参考
test
CHANGED
|
@@ -1 +1,22 @@
|
|
|
1
1
|
インラインsvg内の要素の属性をいじる場合は[setAttributeNS](https://developer.mozilla.org/ja/docs/Web/API/Element/setAttributeNS)を利用ください
|
|
2
|
+
|
|
3
|
+
# 参考
|
|
4
|
+
```javascript
|
|
5
|
+
<script>
|
|
6
|
+
window.addEventListener('DOMContentLoaded', ()=>{
|
|
7
|
+
const svg=document.querySelector('#svg');
|
|
8
|
+
const circle=document.querySelector('#circle');
|
|
9
|
+
const a=document.createElementNS('http://www.w3.org/2000/svg','a');
|
|
10
|
+
a.setAttributeNS('http://www.w3.org/1999/xlink','xlink:href','https://teratail.com/');
|
|
11
|
+
circle.parentNode.insertBefore(a,circle);
|
|
12
|
+
a.appendChild(circle);
|
|
13
|
+
});
|
|
14
|
+
</script>
|
|
15
|
+
<svg id="svg"
|
|
16
|
+
width="200" height="200" type="image/svg+xml"
|
|
17
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
18
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
19
|
+
version="1.1">
|
|
20
|
+
<circle id="circle" cx="100" cy="100" r="50" fill="red"/>
|
|
21
|
+
</svg>
|
|
22
|
+
```
|
1
chousei
test
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
インラインsvg内の要素の属性をいじる場合は
|
|
2
|
-
[setAttributeNS](https://developer.mozilla.org/ja/docs/Web/API/Element/setAttributeNS)を利用ください
|
|
1
|
+
インラインsvg内の要素の属性をいじる場合は[setAttributeNS](https://developer.mozilla.org/ja/docs/Web/API/Element/setAttributeNS)を利用ください
|