导入SVG文件时,如何防止Inkscape更改路径?
我已经手动编码了一个在浏览器中工作正常的SVG文件。我想将其导入Inkscape,作为与之做其他事情的基础,但是每当我尝试导入它时,Inkscape都会完全改变我的路径。我的意思是它改变了一些D属性点。这是一个示例:
我编码:
<div className="svg-container">
<svg
viewBox="-2 -25 200 600"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="#fadfd4"><path d=" M 100, 40 L100,0C114.9116882446, 0, 127, 17.908610008, 127, 40,C127, 62.091389992, 114.9116882446, 80, 100, 80, L118, 70 Q110, 80 120, 87.5 L130, 90 L140, 92.5 L150, 95 Q165, 105 165, 110 L170, 120 Q172.5, 140 175, 160 C175, 185 170, 165 175, 182.5 L182.5, 260 L182.5, 290 L162.5, 315 L165, 285 L157.5, 305 L157.5, 280 L167.5, 260 L155, 190 L150, 127.5 150, 150 145, 175 147.5, 190 155, 230 157.5, 250 160, 285 150, 320 140, 380 137.5, 385 142.5, 410 127.5, 470 127.5, 485 140, 520 110, 530 112.5, 485 105, 380 102.5, 370 100, 320 100, 290 L100,0C85.0883117554, 0, 73, 17.908610008, 73, 40,C73, 62.091389992, 85.0883117554, 80, 100, 80, L82, 70 Q90, 80 80, 87.5 L70, 90 L60, 92.5 L50, 95 Q35, 105 35, 110 L30, 120 Q27.5, 140 25, 160 C25, 185 30, 165 25, 182.5 L17.5, 260 L17.5, 290 L37.5, 315 L35, 285 L42.5, 305 L42.5, 280 L32.5, 260 L45, 190 L50, 127.5 50, 150 55, 175 52.5, 190 45, 230 42.5, 250 40, 285 50, 320 60, 380 62.5, 385 57.5, 410 72.5, 470 72.5, 485 60, 520 90, 530 87.5, 485 95, 380 97.5, 370 100, 320 100, 290 100, 40 z " style="fill: rgb(250, 223, 212); stroke: none; stroke-width: 1px;">
</path></g></svg></div>
同样,它保存到SVG文件中,并且在我的浏览器中显示正常。但是,当我将此SVG导入Inkscape时,它只是显示为垂直线。当我查看XML编辑器时,路径已更改为:
path: M 104.86991,153.79167 V 76.449038
为什么会发生这种情况?似乎Inkscape“读取”了SVG,并试图以某种方式进行优化?有什么办法可以防止Inkscape更改路径而只是导入它?我在SVG方面很新。我做错了吗?请不要告诉我不要编程SVG,我需要这样做。
I've manually coded an svg file that works fine in my browser. I want to import it into inkscape as a base to do other stuff with it, but whenever I try to import it, inkscape changes my path completely. By that I mean it alters some of d attribute points. Here's an example:
I coded:
<div className="svg-container">
<svg
viewBox="-2 -25 200 600"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="#fadfd4"><path d=" M 100, 40 L100,0C114.9116882446, 0, 127, 17.908610008, 127, 40,C127, 62.091389992, 114.9116882446, 80, 100, 80, L118, 70 Q110, 80 120, 87.5 L130, 90 L140, 92.5 L150, 95 Q165, 105 165, 110 L170, 120 Q172.5, 140 175, 160 C175, 185 170, 165 175, 182.5 L182.5, 260 L182.5, 290 L162.5, 315 L165, 285 L157.5, 305 L157.5, 280 L167.5, 260 L155, 190 L150, 127.5 150, 150 145, 175 147.5, 190 155, 230 157.5, 250 160, 285 150, 320 140, 380 137.5, 385 142.5, 410 127.5, 470 127.5, 485 140, 520 110, 530 112.5, 485 105, 380 102.5, 370 100, 320 100, 290 L100,0C85.0883117554, 0, 73, 17.908610008, 73, 40,C73, 62.091389992, 85.0883117554, 80, 100, 80, L82, 70 Q90, 80 80, 87.5 L70, 90 L60, 92.5 L50, 95 Q35, 105 35, 110 L30, 120 Q27.5, 140 25, 160 C25, 185 30, 165 25, 182.5 L17.5, 260 L17.5, 290 L37.5, 315 L35, 285 L42.5, 305 L42.5, 280 L32.5, 260 L45, 190 L50, 127.5 50, 150 55, 175 52.5, 190 45, 230 42.5, 250 40, 285 50, 320 60, 380 62.5, 385 57.5, 410 72.5, 470 72.5, 485 60, 520 90, 530 87.5, 485 95, 380 97.5, 370 100, 320 100, 290 100, 40 z " style="fill: rgb(250, 223, 212); stroke: none; stroke-width: 1px;">
</path></g></svg></div>
Again, this is saved to svg file and it displays fine in my browser. But when I import this svg into inkscape it just displays as a vertical line. When I look at the XML Editor, the path has been changed to this:
path: M 104.86991,153.79167 V 76.449038
Why is this happening? It seems as if inkscape "reads" an svg and tries to optimize it in some way? Is there a way I can prevent inkscape from altering the path and just import it as it is? I'm pretty new at svg. Am I doing something wrong? Please don't tell me not to program svg, I need to do this for other reasons.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
感谢CCPROG在我的代码中找到错误。由于某种原因,事实证明,Inkscape对逗号的宽容比浏览器少。确保您只有数字之间的逗号,而在命令代码之前不具有逗号。
Thanks to ccprog for finding the error in my code. Turns out Inkscape is less forgiving about commas than browsers are, for some reason. Make sure you only have commas between numbers, and not before a command code.