SVG<模式>由 Javascript 生成时不会加载

发布于 2024-11-28 01:42:55 字数 878 浏览 0 评论 0原文

基于更简单的测试用例更新了问题:

我有一个网站,使用由脚本生成的 图形。图形中的内容充满了 svg 图案。到目前为止,一切都很好。

我现在使用 Javascript 将 元素添加到图形中已有的模式中。我可以使用 createElementNSsetAttributeappendChild 等方法轻松做到这一点。

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 或浏览器控制台,我可以更改 fill属性使用不同的模式。这对于页面中从一开始就存在的所有模式都适用,但对于后来添加的模式则不然。 SVG 代码本身没问题;将其保存在 .svg 中并在同一浏览器中打开它可以完美地显示新图案。

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

Updated question, based on a simpler test case:

I have a website using a <svg> graphic generated by a script. The stuff in the graphic is filled with svg patterns. So far, so good.

I now add a <pattern> element, using Javascript, to the patterns that are already in the graphic. I can easily do that, using methods like createElementNS, setAttribute and appendChild.

SVG pattern elements look like this:

<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>

and they're used like this:

<path d="..." fill="url(#stripes)" />

Now: using Javascript, or the browser console, I can change a <path>'s fill attribute to use different patterns. That works fine for all the patterns that were in the page from the start, but it does not for patterns added later on. The SVG code itself is fine; saving it in a .svg and opening that up in the same browser shows the new pattern flawlessly.

Why can dynamically generated patterns not be used?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

ペ泪落弦音 2024-12-05 01:42:55

首先,确保使用命名空间 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" />

Firstly, ensure you create an element using the namespaced document.createElementNS

e.g.

document.createElementNS('http://www.w3.org/2000/svg','rect')

Secondly, only a reference within the 'style' attribute seemed to dynamically apply a pattern housed within 'defs'

e.g.

<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" />
梦中楼上月下 2024-12-05 01:42:55

问题已解决,这个所以问题帮助了我。当我使用 createElementNS 时,我的 SVG 命名空间声明中有一个拼写错误,因此模式和路径元素没有被识别为“真实的东西”,而只是被识别为常规标签。

如果你想使用Javascript来操作SVG DOM树,请注意这一点。

Problem solved, this SO question helped me out. I had a typo in my SVG namespace declaration when I used createElementNS, so the pattern and path elements weren't recognized as "the real thing", but just as regular tags.

If you want to use Javascript to manipulate the SVG DOM tree, pay attention to this.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文