更新的问题,基于更简单的测试用例：
我有一个使用< svg>的网站脚本生成的图形.图形中的东西充满了svg图案.到现在为止还挺好.
我现在添加一个< pattern>使用Javascript的元素到图形中已有的模式.我可以使用createElementNS,setAttribute和appendChild等方法轻松完成.
SVG模式元素如下所示：
<defs> <pattern id="stripes" width="6" height="6" patternUnits="userSpaceOnUse"> <svg:path d="M 0 0 L 10 0 L 10 1 L 0 1 Z" fill="red" width="6" height="6" id="stripepimage"></svg:path> </pattern> </defs>
他们像这样使用：
<path d="..." fill="url(#stripes)" />
现在：使用Javascript或浏览器控制台,我可以更改< path>的fill属性以使用不同的模式.这适用于从一开始就在页面中的所有模式,但它不适用于稍后添加的模式. SVG代码本身很好;将它保存在.svg中并在同一浏览器中打开它可以完美地显示新模式.
为什么不能使用动态生成的模式？
解决方法
首先,确保使用命名空间document.createElementNS创建元素
例如
document.createElementNS('http://www.w3.org/2000/svg','rect')
其次,只有’style’属性中的引用似乎动态地应用了’defs’中的模式
例如
<defs>
<pattern id="patternTest1" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M10,0 L10,10 L0,10" fill="none" stroke="#E9E9E9" stroke-width="1" shape-rendering="crispedges" vector-effect="non-scaling-stroke"/>
</pattern>
</defs>
<rect id="test" x="10" y="10" width="250" height="250" style="fill: url('#patternTest1');" vector-effect="non-scaling-stroke" stroke-width="1" stroke-dasharray="none" stroke="#000000" />
