SVG<；模式>；韩元'；当由Javascript生成时不会加载

根据更简单的测试用例更新了问题：

我有一个网站使用脚本生成的

图形。图形中的内容充满了svg模式。到目前为止，一切顺利

现在，我使用Javascript向图形中已经存在的模式添加了一个

元素。我可以使用

createElements

、

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)" />

它们是这样使用的：

<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或浏览器控制台，我可以更改

的

fill

属性以使用不同的模式。这适用于从一开始就在页面中的所有模式，但不适用于以后添加的模式。SVG代码本身很好；将其保存在.svg中并在同一个浏览器中打开，可以完美地显示新模式

为什么不能使用动态生成的模式？

问题解决了，所以这个问题帮助了我。当我使用

createElements

时，我的SVG名称空间声明中有一个输入错误，因此模式和路径元素没有被识别为“真正的东西”，而是被识别为常规标记

---

如果要使用Javascript操作SVG DOM树，请注意这一点。

首先，确保使用名称空间文档创建元素。CreateElements

e、 g

其次，只有“style”属性中的引用似乎动态地应用了“defs”中包含的模式

e、 g

这可能取决于插件支持的SVG版本。（或您的浏览器本机支持）这取决于什么？当动态创建元素或从文件加载元素时，是否应用模式？（我正在测试Chrome和Firefox，它们几乎是最新的——这是一个内部的东西，所以我甚至不关心旧的IE）。嗯，这只是一个评论。。。我注意到ie上的Adobe插件和chrome上的内置支持（我认为它与SVG 1.1兼容）之间存在一些差异。因此，一个想法是在adobe插件上试用它，并看到它神奇地工作。很有趣，谢谢。我们都在Linux上，所以我无法轻松测试它。我刚刚写了一个简单的测试用例，似乎不可能使用JS添加一个模式（即使它立即出现在源代码中），然后使用.setAttribute（'fill'）将其分配给一个对象。只要处理预先存在的模式，后者就可以正常工作。有没有办法告诉浏览器接受所有新模式到它的DOM树中？你能提供你用来实现这一点的代码吗？很遗憾，我不再在那里工作了，也没有访问代码的权限。我认为您必须确保创建的所有节点都是这样的：

document.createElements（“http://www.w3.org/2000/svg“，“svg”）

（获取

）。。。我希望这有帮助？