将 SVG HTML 转换为 SVG 路径问题
converting SVG HTML to SVG Paths issue
我有一个问号 svg,看起来像这样:
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29">
<g id="Groupe_114" data-name="Groupe 114" transform="translate(-1503 -141)">
<g id="Ellipse_35" data-name="Ellipse 35" transform="translate(1503 141)" fill="none" stroke="#D8D8D8" stroke-width="1">
<circle cx="14.5" cy="14.5" r="14.5" stroke="none"/>
<circle cx="14.5" cy="14.5" r="14" fill="none"/>
</g>
<text id="_" data-name="?" transform="translate(1512 163)" fill="#D8D8D8" font-size="20" font-family="Montserrat-Regular, Montserrat"><tspan x="0" y="0">?</tspan></text>
</g>
</svg>
它实际上是圆圈内的信息问号 SVG
。我需要做的是将它转换为内部的 SVG
路径,这样我就可以将它直接捆绑在我的代码中。我按照 here 上的说明使用 GIMP
,但我得到的最终路径只是外圈,而不是内问号。这是我得到的:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="0.322222in" height="0.322222in"
viewBox="0 0 29 29">
<path id="Imported Path"
fill="none" stroke="black" stroke-width="1"
d="M 28.50,14.50
C 28.50,22.23 22.23,28.50 14.50,28.50
6.77,28.50 0.50,22.23 0.50,14.50
0.50,6.77 6.77,0.50 14.50,0.50
22.23,0.50 28.50,6.77 28.50,14.50 Z
M 29.00,14.50
C 29.00,22.51 22.51,29.00 14.50,29.00
6.49,29.00 0.00,22.51 0.00,14.50
0.00,6.49 6.49,0.00 14.50,0.00
22.51,0.00 29.00,6.49 29.00,14.50 Z" />
</svg>
我以前用 GIMP 来转换另一个 SVG 符号,它工作正常,所以我不确定为什么 GIMP 只返回外圈的路径。谁能告诉我如何最好地转换为路径,以便我可以获得外圈的路径以及里面的问号?谢谢!
在 SVG 中,问号不是路径,它是对字体的引用,因此它可能在 Gimp 的盲点中。
这个稍微复杂的过程似乎可行:
- 在 Inkscape 中打开文件
Path > Object to path
(这会转换圆圈和问号)
- 另存为新的 SVG(此时此 SVG 可能令人满意,否则:
- 按照 link、importing/merging 路径
中的指示在 Gimp 中打开 SVG
- 导出SVG路径:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="0.322222in" height="0.322222in"
viewBox="0 0 29 29">
<path id="Imported Path"
fill="none" stroke="black" stroke-width="1"
d="M 11.80,17.98
C 11.80,17.98 11.80,17.44 11.80,17.44
11.80,16.93 11.85,16.50 11.94,16.14
12.05,15.77 12.22,15.41 12.46,15.08
12.71,14.75 13.05,14.40 13.48,14.04
14.00,13.60 14.40,13.23 14.68,12.94
14.97,12.65 15.18,12.36 15.30,12.08
15.42,11.80 15.48,11.46 15.48,11.06
15.48,10.42 15.27,9.93 14.86,9.58
14.45,9.23 13.85,9.06 13.06,9.06
12.41,9.06 11.83,9.15 11.32,9.32
10.81,9.48 10.33,9.67 9.86,9.90
9.86,9.90 9.24,8.50 9.24,8.50
9.77,8.22 10.36,7.99 11.00,7.80
11.65,7.61 12.38,7.52 13.18,7.52
14.45,7.52 15.43,7.83 16.12,8.46
16.81,9.09 17.16,9.94 17.16,11.02
17.16,11.62 17.06,12.13 16.86,12.56
16.67,12.97 16.40,13.36 16.04,13.72
15.69,14.07 15.28,14.44 14.80,14.84
14.36,15.21 14.02,15.54 13.78,15.82
13.55,16.10 13.40,16.38 13.32,16.66
13.24,16.93 13.20,17.25 13.20,17.64
13.20,17.64 13.20,17.98 13.20,17.98
13.20,17.98 11.80,17.98 11.80,17.98 Z
M 12.74,20.92
C 12.74,20.43 12.85,20.08 13.08,19.88
13.32,19.68 13.62,19.58 13.98,19.58
14.31,19.58 14.60,19.68 14.84,19.88
15.08,20.08 15.20,20.43 15.20,20.92
15.20,21.40 15.08,21.75 14.84,21.96
14.60,22.17 14.31,22.28 13.98,22.28
13.62,22.28 13.32,22.17 13.08,21.96
12.85,21.75 12.74,21.40 12.74,20.92
12.74,20.92 12.74,20.92 12.74,20.92 Z
M 28.50,14.50
C 28.50,22.23 22.23,28.50 14.50,28.50
6.77,28.50 0.50,22.23 0.50,14.50
0.50,6.77 6.77,0.50 14.50,0.50
22.23,0.50 28.50,6.77 28.50,14.50
28.50,14.50 28.50,14.50 28.50,14.50 Z
M 29.00,14.50
C 29.00,22.51 22.51,29.00 14.50,29.00
6.49,29.00 0.00,22.51 0.00,14.50
0.00,6.49 6.49,0.00 14.50,0.00
22.51,0.00 29.00,6.49 29.00,14.50
29.00,14.50 29.00,14.50 29.00,14.50 Z" />
</svg>
我有一个问号 svg,看起来像这样:
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29">
<g id="Groupe_114" data-name="Groupe 114" transform="translate(-1503 -141)">
<g id="Ellipse_35" data-name="Ellipse 35" transform="translate(1503 141)" fill="none" stroke="#D8D8D8" stroke-width="1">
<circle cx="14.5" cy="14.5" r="14.5" stroke="none"/>
<circle cx="14.5" cy="14.5" r="14" fill="none"/>
</g>
<text id="_" data-name="?" transform="translate(1512 163)" fill="#D8D8D8" font-size="20" font-family="Montserrat-Regular, Montserrat"><tspan x="0" y="0">?</tspan></text>
</g>
</svg>
它实际上是圆圈内的信息问号 SVG
。我需要做的是将它转换为内部的 SVG
路径,这样我就可以将它直接捆绑在我的代码中。我按照 here 上的说明使用 GIMP
,但我得到的最终路径只是外圈,而不是内问号。这是我得到的:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="0.322222in" height="0.322222in"
viewBox="0 0 29 29">
<path id="Imported Path"
fill="none" stroke="black" stroke-width="1"
d="M 28.50,14.50
C 28.50,22.23 22.23,28.50 14.50,28.50
6.77,28.50 0.50,22.23 0.50,14.50
0.50,6.77 6.77,0.50 14.50,0.50
22.23,0.50 28.50,6.77 28.50,14.50 Z
M 29.00,14.50
C 29.00,22.51 22.51,29.00 14.50,29.00
6.49,29.00 0.00,22.51 0.00,14.50
0.00,6.49 6.49,0.00 14.50,0.00
22.51,0.00 29.00,6.49 29.00,14.50 Z" />
</svg>
我以前用 GIMP 来转换另一个 SVG 符号,它工作正常,所以我不确定为什么 GIMP 只返回外圈的路径。谁能告诉我如何最好地转换为路径,以便我可以获得外圈的路径以及里面的问号?谢谢!
在 SVG 中,问号不是路径,它是对字体的引用,因此它可能在 Gimp 的盲点中。
这个稍微复杂的过程似乎可行:
- 在 Inkscape 中打开文件
Path > Object to path
(这会转换圆圈和问号)- 另存为新的 SVG(此时此 SVG 可能令人满意,否则:
- 按照 link、importing/merging 路径 中的指示在 Gimp 中打开 SVG
- 导出SVG路径:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="0.322222in" height="0.322222in"
viewBox="0 0 29 29">
<path id="Imported Path"
fill="none" stroke="black" stroke-width="1"
d="M 11.80,17.98
C 11.80,17.98 11.80,17.44 11.80,17.44
11.80,16.93 11.85,16.50 11.94,16.14
12.05,15.77 12.22,15.41 12.46,15.08
12.71,14.75 13.05,14.40 13.48,14.04
14.00,13.60 14.40,13.23 14.68,12.94
14.97,12.65 15.18,12.36 15.30,12.08
15.42,11.80 15.48,11.46 15.48,11.06
15.48,10.42 15.27,9.93 14.86,9.58
14.45,9.23 13.85,9.06 13.06,9.06
12.41,9.06 11.83,9.15 11.32,9.32
10.81,9.48 10.33,9.67 9.86,9.90
9.86,9.90 9.24,8.50 9.24,8.50
9.77,8.22 10.36,7.99 11.00,7.80
11.65,7.61 12.38,7.52 13.18,7.52
14.45,7.52 15.43,7.83 16.12,8.46
16.81,9.09 17.16,9.94 17.16,11.02
17.16,11.62 17.06,12.13 16.86,12.56
16.67,12.97 16.40,13.36 16.04,13.72
15.69,14.07 15.28,14.44 14.80,14.84
14.36,15.21 14.02,15.54 13.78,15.82
13.55,16.10 13.40,16.38 13.32,16.66
13.24,16.93 13.20,17.25 13.20,17.64
13.20,17.64 13.20,17.98 13.20,17.98
13.20,17.98 11.80,17.98 11.80,17.98 Z
M 12.74,20.92
C 12.74,20.43 12.85,20.08 13.08,19.88
13.32,19.68 13.62,19.58 13.98,19.58
14.31,19.58 14.60,19.68 14.84,19.88
15.08,20.08 15.20,20.43 15.20,20.92
15.20,21.40 15.08,21.75 14.84,21.96
14.60,22.17 14.31,22.28 13.98,22.28
13.62,22.28 13.32,22.17 13.08,21.96
12.85,21.75 12.74,21.40 12.74,20.92
12.74,20.92 12.74,20.92 12.74,20.92 Z
M 28.50,14.50
C 28.50,22.23 22.23,28.50 14.50,28.50
6.77,28.50 0.50,22.23 0.50,14.50
0.50,6.77 6.77,0.50 14.50,0.50
22.23,0.50 28.50,6.77 28.50,14.50
28.50,14.50 28.50,14.50 28.50,14.50 Z
M 29.00,14.50
C 29.00,22.51 22.51,29.00 14.50,29.00
6.49,29.00 0.00,22.51 0.00,14.50
0.00,6.49 6.49,0.00 14.50,0.00
22.51,0.00 29.00,6.49 29.00,14.50
29.00,14.50 29.00,14.50 29.00,14.50 Z" />
</svg>