Question

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

Answer 1

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

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

Answer 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。

Answer 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这样的工具来伸出援助之手。

更改SVG颜色

3 个答案: