将 SVG HTML 转换为 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
路径,以便我可以将其直接捆绑到我的代码中。我按照此处 使用 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 仅返回外圆的路径。谁能告诉我如何最好地转换为路径,以便我可以获得外圆的路径以及里面的问号?谢谢你!
I have a question mark svg that looks like this:
<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>
It is effectively an SVG
of an info question mark inside a circle. What I needed to do was to convert it to SVG
paths inside so I could bundle it directly inside my code. I followed the instructions over here using GIMP
, but final path that I get is just of the outside circle, not of the inside question mark. This is what I get:
<?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>
I have used GIMP before for converting another SVG symbol, and it worked okay with that, so I am not sure why is GIMP returning the path of just the outside circle. Could anyone let me know how to best convert to paths so that I can get the path of the outer circle as well as the question mark inside? Thank you!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
在 SVG 中,问号不是路径,它是对字体的引用,因此它可能位于 Gimp 的盲点中。
这个稍微复杂的过程似乎有效:
Path > 对象到路径
(这会转换圆圈和问号)In the SVG the question mark isn't a path, it is reference to the font so it could be in Gimp's blind spot.
This slightly more complex process seems to work:
Path > Object to path
(this converts the circles, and the questions mark)