当我动态添加时,我根本无法重复模式。示例在这里:
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 复制到文件中并运行,它会正确显示,或者如果您动态添加预定义图案,它也会显示正常。
最佳答案
SVG 区分大小写。你有两行不正确:
pattern.setAttribute('patternUnits','userSpaceOnUse');
...
pattern.setAttribute('viewBox','0 0 10 10');
关于javascript - 动态添加时 Svg 模式不重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17136792/