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");

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

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