/
d3_peter5.html
78 lines (68 loc) · 2.48 KB
/
d3_peter5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<title>SVG test</title>
</head>
<body>
<svg>
<defs>
<g id="shape">
<rect x="50" y="50" width="50" height="50" fill="red"/>
<circle cx="50" cy="50" r="50" fill="red"/>
</g>
</defs>
<use xlink:href="#shape" x="50" y="50" />
<use xlink:href="#shape" x="200" y="50" />
</svg>
<div style="width:200px;height:160px;border:1px solid black">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 60" id="inline-svg">
<rect id="background" width="80" height="60" fill="#eee"/>
<text font-size="7px" x="2" y="8">Inline SVG</text>
<script type="text/javascript">
var svg = document.getElementsByTagName('svg')[0];
var element = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
element.setAttributeNS(null, 'x', 10);
element.setAttributeNS(null, 'y', 15);
element.setAttributeNS(null, 'width', 25);
element.setAttributeNS(null, 'height', 30);
element.setAttributeNS(null, 'fill', '#007bff');
svg.appendChild(element);
console.log(1 < 2);
</script>
</svg>
</div>
<object width="200" height="160" id="svg-object" style="border:1px solid black" data="ranchimall_logo.svg" type="image/svg+xml">
</object>
<img width="200" height="160" id="svg-img" style="border:1px solid black" src="ranchimall_logo.svg">
</img>
<script type="text/javascript">
window.addEventListener("load", updateSVGs);
function addRect(svg) {
var element = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
element.setAttributeNS(null, 'x', 45);
element.setAttributeNS(null, 'y', 15);
element.setAttributeNS(null, 'width', 25);
element.setAttributeNS(null, 'height', 30);
element.setAttributeNS(null, 'fill', '#ec008c');
svg.appendChild(element);
}
// console.log(document.getElementsByTagName('svg').length);
function updateSVGs() {
var svg = document.getElementById('inline-svg');
addRect(svg);
svg.removeChild(document.getElementById('background'));
var element = document.createElementNS('http://www.w3.org/2000/svg', 'text');
element.setAttributeNS(null, 'x', 5);
element.setAttributeNS(null, 'y', 15);
var txt = document.createTextNode("Hello World");
element.appendChild(txt);
svg.appendChild(element);
var svgObject = document.getElementById('svg-object').contentDocument;
var svg = svgObject.getElementsByTagName('svg')[0];
var el = svgObject.getElementById("target");
console.log(el);
addRect(svg);
}
</script>
</body>
</html>