4

動的に追加したときに、パターンを繰り返すことができません。例はここにあります：

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/。パターンは示されますが、繰り返されません。誰にもアイデアはありますか？

生成された SVG をファイルにコピーして貼り付けて実行すると、正しく表示されるか、事前定義されたパターンを動的に追加すると、問題なく表示されます。

4

1 に答える 1

2

SVG では大文字と小文字が区別されます。間違った行が 2 つあります。

pattern.setAttribute('patternUnits','userSpaceOnUse');
...
pattern.setAttribute('viewBox','0 0 10 10');
于 2013-06-16T20:03:42.827 に答える