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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<input type="text" name="inp" id="inp">
<button id="btn">确定</button>
<div class="box"></div>
<script>
window.onload = function() {
let svgNS = "http://www.w3.org/2000/svg"
let div = document.querySelector('.box')
function createTag(tag, obj) {
var oTag = document.createElementNS(svgNS, tag)
oTag.setAttribute('id', 's')
for(var attr in obj) {
oTag.setAttribute(attr, obj[attr])
}
return oTag
}
var osvg = createTag('svg', {'xmlns':'svgNS', 'width':'800', 'height':'600'})
function createCircle() {
var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
circle.setAttribute('cx', 70)
circle.setAttribute('cy', 80)
circle.r.baseVal.value = 70
circle.setAttribute('fill', 'red')
osvg.append(circle)
}
function createEllipse() {
var ellipse = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse')
ellipse.setAttribute('cx', 70)
ellipse.setAttribute('cy', 80)
ellipse.setAttribute('rx', 70)
ellipse.setAttribute('ry', 40)
ellipse.setAttribute('fill', 'green')
osvg.append(ellipse)
}
function createRectangle() {
var rectangle = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
rectangle.setAttribute('cx', 70)
rectangle.setAttribute('cy', 90)
rectangle.setAttribute('width', 140)
rectangle.setAttribute('height', 160)
rectangle.setAttribute('fill', 'aqua')
osvg.append(rectangle)
}
function createHexStar() {
var hexagonalStar1 = document.createElementNS('http://www.w3.org/2000/svg', 'path')
hexagonalStar1.setAttribute('d', 'm247.36202,313.63712l103.99999,-181.99998l103.99999,181.99998l-207.99998,0z')
hexagonalStar1.setAttribute('fill', 'blue')
var hexagonalStar2 = document.createElementNS('http://www.w3.org/2000/svg', 'path')
hexagonalStar2.setAttribute('transform', 'rotate(-180 351.362 284.637)')
hexagonalStar2.setAttribute('d', 'm247.36202,375.63712l103.99999,-181.99998l103.99999,181.99998l-207.99998,0z')
hexagonalStar2.setAttribute('fill', 'blue')
osvg.append(hexagonalStar1)
osvg.append(hexagonalStar2)
}
function handleSubmit() {
let input = document.getElementById('inp')
let value = input.value
document.getElementById('s').innerHTML = ""
if(value==='C') {
createCircle()
}
if(value==='E') {
createEllipse()
}
if(value==='R') {
createRectangle()
}
if(value==='S') {
createHexStar()
}
}
document.getElementById('btn').onclick = handleSubmit
div.append(osvg)
}
</script>
</body>
</html>
|
