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

Question

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

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

所以我想我可以很容易地改变填充而不是使用“象牙”，我把它改成了“theImageIwantToUse”。但这似乎不起作用。

Answer 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});

Answer 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 )

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