改变SVG颜色

Question

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

- Rick

Answer 1

你不能只用style="background-color: #------;"(或者也许是color:)吗？

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

- Brendan Long

---

形状不是简单的矩形、圆形或类似的形状，可以在这里查看：http://imgur.com/D9aFo.png - 我正在尝试将蓝色更改为红色或其他颜色。 - Rick

Answer 2

@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的工具来帮助。

- pluke

Answer 3

您可以使用色相旋转滤镜，或者像上面建议的那样修复颜色。更改颜色以符合您的需求可能更加兼容，但无论如何，这是一个滤镜变体的示例：

<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，您可以在此处实时查看。

- Erik Dahlström