SVG模式在动态添加时不重复

Question

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.

Answer 1

SVG is case sensitive. You have two incorrect lines:

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