如何使用 jQuery SVG 插件设置 SVG 矩形元素的背景图像?

Posted

技术标签:

【中文标题】如何使用 jQuery SVG 插件设置 SVG 矩形元素的背景图像?【英文标题】:How to set a SVG rect element's background image with jQuery SVG plugin? 【发布时间】:2012-05-31 00:07:12 【问题描述】:

我使用 keith-wood 的 jQuery SVG 插件创建了一个 SVG 矩形。代码如下:

svg.graph._wrapper.rect(group, 0, 100, 40, 20,
                       fill: 'ivory',
                        stroke: 'black',
                        strokeWidth : 2);

所以我认为我可以轻松更改填充而不是使用“象牙”,我将其更改为“theImageIwantToUse”。但它似乎不起作用。

【问题讨论】:

【参考方案1】:

您不能直接插入外部图像作为 SVG 对象的背景。

相反,您首先必须创建这样的模式

var ptn = svg.pattern(defs, "imgPattern", 0, 0, 100, 100, 0, 0, 10, 10, 
                      patternUnits: "userSpaceOnUse");
svg.image( ptn, 100, 50, 200, 200, "./theImageIwantToUse.png");

然后通过填充属性中的url() 函数使用此模式

svg.graph._wrapper.rect(group, 0, 100, 40, 20,
                       fill: 'url(#imgPattern)',
                        stroke: 'black',
                        strokeWidth : 2);

【讨论】:

***.com/a/10737277/109374 可能会表现得更好,但 +1 用于展示如何使用模式做到这一点。【参考方案2】:

您可以使用 <image> 元素 http://www.w3.org/TR/SVG/struct.html#ImageElement 在 svg 中插入图片

您提到的插件中提供了适当的功能。

svg.image(parent, x, y, width, height, ref, settings)  

(http://keith-wood.name/svg.html)

我怀疑是否可以在图像中使用描边,因此您必须在绘制图像后绘制一个没有填充的矩形以获得您想要的确切结果。

【讨论】:

这个解决方案的性能比使用 fill 属性的解决方案好很多。

以上是关于如何使用 jQuery SVG 插件设置 SVG 矩形元素的背景图像?的主要内容,如果未能解决你的问题,请参考以下文章

是否可以直接使用 jquery 和 Svg(无插件)?

轻量级HTML5插件使用jQuery绘制SVG图形轮廓线路径动画教程

jQuery SVG - 悬停元素

制作svg动画

如何使用 jQuery 更改 SVG 元素属性?

5个超赞的画布Canvas,SVG和CSS3相关的jQuery插件