以任意颜色呈现 SVG 形状的最跨浏览器的方法是什么？答案

【问题标题】：What is the most cross-browser way to render an SVG shape in an arbitrary color?以任意颜色呈现 SVG 形状的最跨浏览器的方法是什么？
【发布时间】：2012-02-25 11:43:44
【问题描述】：

给定一个平坦的 100% 黑色 2D SVG 形状，我如何以任意颜色渲染它，尽可能跨浏览器？

【问题讨论】：

标签： css svg

【解决方案1】：

Raphael (http://raphaeljs.com/)，适用于 IE5+（通过 VML 后备）、Safari、Chrome、Opera、Firefox，但在 Honeycomb 之前的 Android 中不适用。
Svgweb (http://code.google.com/p/svgweb/) 可以正常工作，但可以通过 Flash 回退（iPad、iPhone 不支持）。
Canvg (http://code.google.com/p/canvg/) 适用于所有支持 SVG 或 Canvas 的平台。

我会说拉斐尔是你最好的选择。

在 Raphael 中渲染 2D 颜色很容易。例如：

<script type="javascript">
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates a red-filled cross-looking shape
paper.path("M10,10L50,50M50,10L10,50").attr({stroke: "red", fill:"red"});
</script>

【讨论】：

嗯，你没有解决关于以任意颜色渲染图像的部分。使用上述工具包是否简单？
@AlanH SVG 就是用颜色填充事物。如果您有权访问源 SVG，则可以更改其填充（使用 DOM 方法）。任何支持 SVG 的浏览器都支持这一点。
我编辑了我的答案以包含一个关于如何使用 Raphael 进行操作的示例。希望对您有所帮助。