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

Question

我正在尝试使用 javascript 中的背景图像动态填充圆形 svg 对象。

我创建了一个内部有图像的图案，但 svg 元素填充的不是实际图像，而是纯黑色背景，我似乎无法弄清楚自己做错了什么。

这是我的 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

有几处错误。

1. 正如 Francis 所说，您没有将图案附加到您的 SVG。
2. 您需要为图案指定宽度和高度
3. 您需要为图片指定宽度和高度

为了简化事情，我改用“objectBoundingBox”单位作为 patternUnits 和 patternContentUnits。因此图案会自动缩放以适合圆的边界。

pattern.setAttribute('patternContentUnits', 'objectBoundingBox');
pattern.setAttribute('width', '1');
pattern.setAttribute('height', '1');

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

无论如何，here is a working version