Question

我尝试使用javascript中的背景图片动态填充svg对象。

我已经创建了一个图案，里面有一个图像，但是svg元素不是实际的图像，而是填充了纯黑色的背景，而我似乎无法弄清楚我是什么＆＃ 39;我做错了。

这是我的HTML：

<svg style="height: 405px;">
<g class="item-view" data-id="8" transform="translate(186.50687741518976,99.62945152749784)">
    <circle id="circle-8" r="60" opacity="1" style="fill:rgb(255,255,255); stroke: rgb(0, 132, 215); stroke-width: 3px;"></circle>
    <text x="-35.5" y="-27" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 18px; font-family: verdana; opacity: 1; fill: rgb(0, 0, 0);">New item</text>
    <text x="-46" y="-9" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 18px; font-family: verdana; opacity: 1; fill: rgb(0, 0, 0);">created with</text>
    <text x="-42.5" y="9" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 18px; font-family: verdana; opacity: 1; fill: rgb(0, 0, 0);">moderation</text>
    <text x="-30.5" y="27" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 18px; font-family: verdana; opacity: 1; fill: rgb(0, 0, 0);">disabled</text>
</g>
<g class="item-view" data-id="9" transform="translate(186.36080783220538,219.60697802343384)">
    <circle id="circle-9" r="60" opacity="1" style="fill: rgb(255,255,255); stroke: rgb(0, 132, 215); stroke-width: 3px;"></circle>
    <text x="-47" y="-9" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 18px; font-family: verdana; opacity: 1; fill: rgb(0, 0, 0);">New item by</text>
    <text x="-23" y="9" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 18px; font-family: verdana; opacity: 1; fill: rgb(0, 0, 0);">Seppo</text>
</g>
<g class="item-view" data-id="3" transform="translate(559.4999999997835,332.46850012177873)">
    <circle id="circle-3" r="60" opacity="1" style="fill:rgb(255,255,255); stroke: rgb(0, 132, 215); stroke-width: 3px;"></circle>
    <text x="-29" y="-27" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 18px; font-family: verdana; opacity: 1; fill: rgb(0, 0, 0);">Another</text>
    <text x="-40.5" y="-9" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 18px; font-family: verdana; opacity: 1; fill: rgb(0, 0, 0);">moderated</text>
    <text x="-41" y="9" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 18px; font-family: verdana; opacity: 1; fill: rgb(0, 0, 0);">item of the</text>
    <text x="-35" y="27" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 18px; font-family: verdana; opacity: 1; fill: rgb(0, 0, 0);">customer</text>
</g>
<g class="item-view" data-id="10" transform="translate(187.48988498687854,339.60166617577994)">
    <circle id="circle-10" r="60" opacity="1" style="fill:rgb(255,255,255); stroke: rgb(0, 132, 215); stroke-width: 3px;"></circle>
    <text x="-47" y="-9" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 18px; font-family: verdana; opacity: 1; fill: rgb(0, 0, 0);">New item by</text>
    <text x="-43" y="9" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 18px; font-family: verdana; opacity: 1; fill: rgb(0, 0, 0);">anonymous</text>
    <text x="-16" y="27" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 18px; font-family: verdana; opacity: 1; fill: rgb(0, 0, 0);">user</text>
</g>
</svg>

这是javascript：

var SVG_NS = $('svg')[0].namespaceURI;

var pattern = document.createElementNS(SVG_NS, 'pattern');

pattern.setAttribute('id', 'SVGBackgroundImage');
pattern.setAttribute('patternUnits', 'userSpaceOnUse');

var image = document.createElementNS(SVG_NS, 'image');
image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://upload.wikimedia.org/wikipedia/en/e/ec/Soccer_ball.svg');
image.setAttribute('x', '0');
image.setAttribute('y', '0');

pattern.appendChild(image);

$('g.item-view circle').each(function (index) {
    $('g.item-view circle')[index].setAttribute('style', 'fill: url(#' + pattern.id + ');');
});

这里有一个jsFiddle进一步说明问题：http://jsfiddle.net/ubLr4/9/

Answer 1

有几件事是错的。

正如弗朗西斯所说，你没有将模式附加到你的SVG。
您需要为模式指定宽度和高度
您需要为图片指定宽度和高度

为简化起见，我转而使用{object {1}}和patternUnits的“objectBoundingBox”单位。因此，模式会自动缩放以适应圆的边界。

patternContentUnits

你真的不需要在这里使用模式。用图像替换圆圈会更简单。

无论如何，here is a working version

Answer 2

您的模板元素未附加到您的根SVG元素

使用javascript中的图像填充圆形SVG元素

2 个答案: