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

Question

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

但是我放弃了 Canvas 方法，因为它是一个手机网络应用程序，我发现一个页面上有几个 Canvas 在旧手机上运行得非常慢。

任何人都可以建议一种可行的替代方法，同时牢记速度很重要吗？我一直在考虑:

用 css 绘图，但看起来像很多标记和乱七八糟地创建一个相对简单的形状。

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

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

为长篇大论的帖子道歉，我只是不知道在 canvas 被证明是不可能的之后最好的方法。我很乐意被指出正确的方向。

谢谢

Answer 1

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

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

http://raphaeljs.com/