绘制图像并用颜色或图案动态填充它

Question

我需要绘制一个自定义形状并用纯色或图案填充它。我已经实现了形状，并且能够使用 2d html5 画布和 javascript 更改填充颜色。

但是我放弃了画布方法，因为它是一款适用于手机的网络应用程序，我发现一个页面上有多个画布，尤其是在旧手机上运行速度非常慢。

任何人都可以就另一种可行的方法提出建议，记住速度很重要？我一直在考虑：

用 css 绘图，但似乎需要大量标记和乱七八糟地创建一个相对简单的形状。

SVG - 直到昨晚才知道它的存在。这个例子http://www.w3schools.com/svg/tryit.asp?filename=trysvg_polygon4 看起来很像canvas，它对性能有什么影响吗？

覆盖某种 webkit css 掩码，例如 http://www.webkit.org/blog/181/css-masks/，但带有背景颜色或图案。如果页面的背景图像不是纯色，似乎可能会出现问题。

对于冗长的帖子道歉，我只是不知道在画布被证明是不可能的之后最好的方法。我很想被指出正确的方向。

谢谢

Answer 1

查看 Raphaël，它基于 SVG，并受以下浏览器支持：

• Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+ 和 Internet Explorer 6.0+。

http://raphaeljs.com/

Answer 2

借助 SVG，您可以使用 CSS 来设置填充样式，这使得将填充设置为图案或纯色非常容易。

这是example 的 svg 模式。