如何设置SVG rect元素的背景图像？

我使用keith-wood的jQuery SVG插件创建了一个SVG rect。 这是代码：

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

所以我认为我可以轻松更改填充而不是使用’象牙’，我将其更改为’theImageIwantToUse’。 但它似乎没有用。

Answer 1

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

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

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

（ http://keith-wood.name/svg.html ）

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

Answer 2

您无法直接插入外部图像作为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"); 

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

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