如何从这个具有填充的复杂路径的 svg 更改为具有没有填充的简单路径的上述 svg？

Posted 2023-04-14

【中文标题】如何从这个具有填充的复杂路径的 svg 更改为具有没有填充的简单路径的上述 svg？

【英文标题】：How to change from this svg with this complex path that has fill to the above svg that has simple path with no fill?

【发布时间】：2013-12-31 03:41:46

【问题描述】：

我有一些具有复杂/复合路径的 svg 文件。这些在 Inkscape 或 Illustrator 中使用压敏笔绘制的路径在路径之间有微小的填充。在 Illustrator 中，您可以选择整个路径，然后将笔更改为基本笔（无压力感应），这会将路径更改为简单路径。如何使用 js 实现这一点？

我在这里有两种路径的 2 个示例：

   http://jsfiddle.net/KRKz9/3/ 

如何从这个具有填充的复杂路径的 svg 更改为具有使用 js 没有填充的简单路径的上述 svg？

编辑：嗨@罗伯特。我有这样的：

function makeSame()  
var paths = maing.getElementsByTagName("path"); 
for (var i=0, max=paths.length; i < max; i++)  paths[i].style.stroke="none"; paths[i].style.fill="blue"; 
paths[i].style.stroke_width=2; 
  

在 jsbin 中：jsbin.com/sovit/1/edit

我卡在这里了，你能纠正一下吗？

编辑：谢谢@robert。我只是这样纠正它：

var paths = document.getElementsByTagName("path"); 

现在的问题是，重复的路径仍然存在： （这个 jsfiddle 示例以及使用上述代码生成的 svg 代码，表明每行似乎有 2 条路径）

http://jsfiddle.net/Y35sV/2/

请问可以删除每行的第二条路径吗？

【问题讨论】：

最后一部分似乎是一个不同的问题。

非常感谢@robert。这是问题：***.com/questions/20847767/…

@RobertLongson。你能否给我一个关于如何解决这个问题的提示？！如果这需要很多或简单的代码可以做到这一点？

【参考方案1】：

大概是这样的吧？

function makeSame() 

    var paths = document.getElementsByTagName("path");
    for (var i=0, max=paths.length; i < max; i++) 
        paths[i].style.stroke="none";
        paths[i].style.fill="#0000C6";
    

这将转换路径，改变它们的填充和描边，以便它们匹配。

【讨论】：

感谢罗伯特的解决方案。您能否将其应用于我上面的 jsfiddle 示例，看看它是如何工作的？我无法让它工作！

嗨@Robert.Here 我有这样的：function makeSame() var paths = maing.getElementsByTagName("path"); for (var i=0, max=paths.length; i

我写了 document.getElementsByTagName 而你写了 maing.getElementsByTagName 如果你在浏览器控制台中查看你会看到你的代码在那一行有错误。