Filling a round SVG element with an image in javascript

Question

I'm trying to dynamically fill round svg objects with a background image in javascript.

I've created a pattern with an image inside of it but instead of the actual image, the svg elements are filled with a solid black background instead and I just can't seem to figure out what I'm doing wrong.

Here's my html:

And here's the 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 + ');');
});

Here's a jsFiddle further illustrating the problem: http://jsfiddle.net/ubLr4/9/

Paul LeBeau · Accepted Answer

There were several things wrong.

As Francis said, you didn't attach the pattern to your SVG.
You need to specify a width and height for your pattern
You need to specify a width and height for your image

To simplify things, I switched to using "objectBoundingBox" units for patternUnits and patternContentUnits. So the pattern automatically scales to fit the circle's bounds.

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

You didn't really need to use a pattern here. It would have been simpler just to replace the circle with the image.

Anyway, here is a working version

Filling a round SVG element with an image in javascript

Answers (2)

Related Questions