CODEWITHSUNDEEP
javascriptsvg
user2491363
user2491363

Reputation: 43

Svg pattern not repeating when dynamically added

I simply can't get pattern to repeat when I added it dynamically. Example is here:

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

pattern = document.createElementNS(SVG_NS,'pattern');
pattern.setAttribute('id','test');
pattern.setAttribute('patternunits','userSpaceOnUse');
pattern.setAttribute('width','10');
pattern.setAttribute('height','10');
pattern.setAttribute('x','0');
pattern.setAttribute('y','0');
pattern.setAttribute('viewbox','0 0 10 10');

path = document.createElementNS(SVG_NS,'rect');
path.setAttribute('x','0');
path.setAttribute('y','0');
path.setAttribute('width','5');
path.setAttribute('height','5');
path.setAttribute('fill','lightblue');
pattern.appendChild(path);
path1 = document.createElementNS(SVG_NS,'rect');
path1.setAttribute('x','5');
path1.setAttribute('y','5');
path1.setAttribute('width','5');
path1.setAttribute('height','5');
path1.setAttribute('fill','lightblue');
pattern.appendChild(path1);

var defs = $('svg')[0].querySelector('defs');
defs.appendChild(pattern);
$('svg path')[0].setAttribute('style','fill: url(#test);');

http://jsfiddle.net/ubLr4/ . It shows pattern, but it doesn't get repeated. Anyone has any ideas?

If you copy paste generated SVG into file and run, it will display correctly or if you add predefined pattern dynamically it also shows ok.

Upvotes: 4

Views: 1795

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

SVG is case sensitive. You have two incorrect lines:

pattern.setAttribute('patternUnits','userSpaceOnUse');
...
pattern.setAttribute('viewBox','0 0 10 10');

Upvotes: 2

Related Questions