-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclassIntoAttr.html
104 lines (96 loc) · 4.8 KB
/
classIntoAttr.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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>SVG文件类转属性</title>
<style>
textarea {
width: 40vw;
height: 400px;
}
</style>
</head>
<body>
<div>
<textarea id="originSVG"></textarea>
<textarea id="newSVG"></textarea>
<button onclick="newSVG.value=svg_class_to_attrs(originSVG.value),preview.innerHTML=newSVG.value;">转换</button>
</div>
<div id="preview" style="width:240px;height:240px"></div>
<script type="text/javascript">
const svg_class_to_attrs = (() => {
const iframe = document.createElement('iframe')
iframe.style.display = 'none'
document.documentElement.appendChild(iframe)
const ownDocument = iframe.contentWindow.document
const div = document.createElement('div')
const createElement = function(template) {
div.innerHTML = template
return div.firstElementChild
}
return template => {
const svg = createElement(template)
ownDocument.write(`<html> <head></head><body>${svg.outerHTML}</body></html>`)
const sheets = Array.from(ownDocument.styleSheets)
for (const sheet of sheets) {
try {
var rules = sheet.rules
for (var j = 0; j < rules.length; j++) {
var rule = rules[j]
var selectorText = rule.selectorText
for (const element of svg.querySelectorAll(selectorText)) {
for (const name of rule.style) {
element.setAttribute(name, rule.style[name])
}
}
}
} catch (error) {}
}
for (const element of Array.from(svg.getElementsByTagName('style'))) {
svg.removeChild(element)
}
for (const element of svg.querySelectorAll('*')) {
element.removeAttribute('class')
}
return svg.outerHTML
}
})()
</script>
<script>
originSVG.value = `
<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<style type="text/css">
.st0{fill:#E8E8DF;}
.st1{fill:#639736;}
.st2{fill:#D8D5C8;}
.st3{fill:#EBCF5D;}
.st4{fill:#84B857;}
.st5{enable-background:new;}
.st6{fill:#FFFFFF;}
</style>
<g>
<path class="st0" d="M33.1,0h-26C6.4,0,5.8,0.6,5.8,1.7v47.4c0,0.3,0.6,0.9,1.3,0.9h35.8c0.7,0,1.3-0.6,1.3-0.9V11.5
c0-0.7-0.1-0.8-0.2-0.9L33.6,0.2C33.5,0.1,33.3,0,33.1,0z" />
<path class="st1" d="M42.9,50H7.1c-0.7,0-1.3-0.6-1.3-1.3V34.9h38.4v13.8C44.2,49.4,43.6,50,42.9,50z" />
<polygon class="st2" points="33.6,0.1 33.6,10.7 44.1,10.7 " />
<circle class="st3" cx="16.9" cy="12.9" r="4.1" />
<polygon class="st4" points="5.8,34.9 15.7,34.9 44.2,34.9 44.2,25.1 35.3,16.5 25.9,26.8 21,22 " />
<g class="st5">
<path class="st6" d="M16.6,44.1h-1.8v3.6H13v-9.4h3.6c2,0,3.1,1.3,3.1,2.9C19.7,42.7,18.6,44.1,16.6,44.1z M16.5,39.9h-1.7v2.6
h1.7c0.8,0,1.4-0.6,1.4-1.3S17.4,39.9,16.5,39.9z" />
<path class="st6" d="M26.8,47.7l-3.7-5.8v5.8h-1.9v-9.4h1.7l3.7,5.8v-5.8h1.9v9.4C28.5,47.7,26.8,47.7,26.8,47.7z" />
<path class="st6" d="M36.4,46.6c-0.7,0.7-1.7,1-2.6,1c-1,0-1.9-0.4-2.5-1c-0.9-0.9-0.9-2.1-0.9-3.7c0-1.6,0-2.8,0.9-3.7
c0.7-0.7,1.5-1,2.5-1c2.1,0,3.3,1.4,3.6,3h-1.9c-0.2-0.8-0.7-1.4-1.7-1.4c-0.5,0-0.9,0.2-1.2,0.5c-0.4,0.4-0.5,0.8-0.5,2.6
s0.1,2.2,0.5,2.6c0.3,0.3,0.7,0.5,1.2,0.5c0.6,0,1-0.2,1.3-0.6s0.5-0.7,0.5-1.2v-0.4h-1.8v-1.3h3.6v1.4
C37.4,45.1,37.1,46,36.4,46.6z" />
</g>
</g>
</svg>`
</script>
</body>
</html>