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

Question

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

然而，我放弃了画布方法，因为它是一款适用于手机的网络应用程序，我发现在一个页面上有几个画布特别在旧手机上运行得非常慢。

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

使用css绘图，但似乎有很多标记和混乱来创建一个相对简单的形状。

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

覆盖某种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来设置填充样式，这样可以很容易地将填充设置为图案或纯色。

这是svg中的example模式。