我使用keith-wood的jQuery SVG插件创建了一个SVG rect。这是代码:
svg.graph._wrapper.rect(group, 0, 100, 40, 20,
{fill: 'ivory',
stroke: 'black',
strokeWidth : 2});
所以我认为我可以轻松更改填充而不是使用'象牙',我将其更改为'theImageIwantToUse'。但它似乎没有用。
答案 0 :(得分:11)
您无法直接插入外部图像作为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});
答案 1 :(得分:9)
您可以使用<image>
元素http://www.w3.org/TR/SVG/struct.html#ImageElement
您提到的插件中提供了适当的功能。
svg.image(parent, x, y, width, height, ref, settings)
(http://keith-wood.name/svg.html)
我怀疑是否可以在图像中使用笔划,因此在绘制图像后必须绘制一个没有填充的矩形,以获得所需的精确结果。