更改 SVG 颜色答案

【问题标题】：Change SVG Colour更改 SVG 颜色
【发布时间】：2013-06-13 15:59:54
【问题描述】：

你能改变 SVG 中形状的颜色吗？目前我正在使用我必须在 Photoshop 中为每个不同的菜单手动创建的 PNG，我想知道我是否可以使整个过程动态化。

【问题讨论】：

标签： svg

【解决方案1】：

~~你不能只用style="background-color: #------;"（或者color:）吗？~~

编辑：我的错误，你需要的是填充，所以style="fill:#------;"，它应该适用于任何形状。

【讨论】：

形状不是简单的矩形或圆形或类似的形状，请参见此处：imgur.com/D9aFo.png - 我正在尝试将蓝色更改为红色或其他。

【解决方案2】：

您可以使用色调旋转滤镜，也可以按照上面的建议修复颜色。可能更兼容将颜色更改为您需要的颜色，但无论如何，这里有一个过滤器变体的示例：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="h200" x="0" y="0" width="1" height="1">
    <feColorMatrix type="hueRotate" values="200"/>
  </filter>
  <image xlink:href="http://imgur.com/D9aFo.png" width="207" height="46" filter="url(#h200)"/>
</svg>

如果您使用支持 svg 过滤器的浏览器，例如 Opera 或 Firefox，您可以看到它的直播 here。

【讨论】：

【解决方案3】：

@Brendan_Long 是正确的，您所需要的只是路径对象上的样式标记。在此处查看演示：http://kemputing.com/demo/shapeDemoColour.svg

代码如下：

 <path
 style="fill:#000080;"
 d="M 125.0,478.0 172.0,305.0 337.0,266.0 508.0,438.0 482.0,586.0 287.0,659.0 z"
 id="path2985"/>

创建与您的图像匹配的路径，然后以编程方式更改附加到它的颜色。您可能想使用像 inkscape 这样的工具来提供帮助。

【讨论】：