Repository navigation
Expand file tree
/
Copy pathconvertUseToGroup.js
More file actions
87 lines (74 loc) · 2.67 KB
/
Copy pathconvertUseToGroup.js
File metadata and controls
87 lines (74 loc) · 2.67 KB
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
const { SLICE } = require('../utils.js')
const symbolNodes = new Set([])
const transformUse = (document, Doc) => {
SLICE.call(document.childNodes).forEach(node => {
if (node.nodeName.toUpperCase() === 'USE') {
const useID = node.getAttribute('xlink:href').replace('#', '')
let symbolNode = Doc.getElementById(useID)
symbolNodes.add(useID)
if (symbolNode) {
const group = Doc.createElement('g')
const attributes = SLICE.call(node.attributes)
if (attributes.length > 0) {
let transform = ''
let x = 0
let y = 0
if (node.hasAttributes('x')) x = node.getAttribute('x') || 0
if (node.hasAttributes('y')) y = node.getAttribute('y') || 0
if (node.hasAttributes('transform')) {
transform = node.getAttribute('transform')
}
if (x != 0 && y != 0) transform += ` translate(${x}, ${y})`
if (transform) {
group.setAttribute(
'transform',
transform.replace(/(^\s+|\s+$)/g, '')
)
}
node.removeAttribute('x')
node.removeAttribute('y')
node.removeAttribute('y')
node.removeAttribute('xlink:href')
node.removeAttribute('style')
SLICE.call(node.attributes).map(({ nodeName, value }) => {
group.setAttribute(nodeName, value)
})
}
if (symbolNode.nodeName.toUpperCase() === 'SYMBOL') {
const newSymbol = symbolNode.cloneNode(true)
const symbolGroup = Doc.createElement('g')
symbolNode.removeAttribute('transform')
symbolNode.removeAttribute('viewBox')
SLICE.call(symbolNode.attributes).map(({ nodeName, value }) => {
symbolGroup.setAttribute(nodeName, value)
})
SLICE.call(newSymbol.childNodes).map(path => {
symbolGroup.appendChild(path)
})
symbolNode = symbolGroup
}
group.appendChild(symbolNode.cloneNode(true))
node.parentNode.replaceChild(group, node)
}
} else if (node.hasChildNodes()) {
transformUse(node, Doc)
}
})
}
/**
* convertUseToGroup 转换 use 标签为 g 标签 插件
* 注意 symbol 标签 无 tranform 属性，含 viewBox 属性
* @param {*} Doc
*/
const convertUseToGroup = Doc => {
transformUse(Doc.documentElement, Doc)
symbolNodes.forEach(id => {
const node = Doc.getElementById(id)
if (node.nodeName.toUpperCase() === 'SYMBOL') {
node.parentNode.removeChild(node)
} else if (node.parentNode.nodeName.toUpperCase() === 'DEFS') {
node.parentNode.removeChild(node)
}
})
}
exports.fn = convertUseToGroup