将 SVG HTML 转换为 SVG 路径问题

发布于 2025-01-13 06:32:27 字数 2125 浏览 2 评论 0原文

我有一个问号 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

黎歌 2025-01-20 06:32:27

在 SVG 中,问号不是路径,它是对字体的引用,因此它可能位于 Gimp 的盲点中。

这个稍微复杂的过程似乎有效:

  1. 中打开文件
  2. 在 Inkscape Path > 对象到路径(这会转换圆圈和问号)
  3. 另存为新的 SVG(此时此 SVG 可能会令人满意,否则:
  4. 按照链接中的指示在 Gimp 中打开 SVG,导入/合并路径
  5. 导出路径到 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>

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:

  1. Open the file in Inkscape
  2. Path > Object to path (this converts the circles, and the questions mark)
  3. Save as new SVG (at that point this SVG could be satisfactory otherwise:
  4. Open SVG in Gimp as indicate in link, importing/merging the path
  5. Export the path to 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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文