gpt4 book ai didi

javascript - 如果不通过 createElementNS 处理,为什么动态 SVG 不能工作

转载 作者:行者123 更新时间:2023-11-27 23:54:10 25 4
gpt4 key购买 nike

我试图在纯 JS 中操作 SVG,发现如果我不使用 createElementNSsetAttributeNS 等方法,它不会按预期运行。

<svg id="mydsvg" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

上面的标记工作得很好。但是,如果您尝试通过以下代码添加另一个圈子,您将看不到它。

var circle = createElement('circle');
circle.setAttribute('cx', 50);
....
document.getElementById('mysvg').appendChild(circle);

但如果您使用 createElementNSsetAttributeNS,它将按预期工作。

最糟糕的是,createElementcreateElementNS 都会创建相同的 DOM 文本。

最佳答案

它不起作用,因为规范规定 SVG 元素必须存在于 SVG 命名空间中,而 createElement 在 html 命名空间中创建元素。否则解析器怎么知道你是否想创建一个 html <a>与 src 属性或 SVG 一起使用的元素 <a>需要 `xlink:href 属性的元素。

在命名空间未序列化的 html 中,事情看起来是一样的。在 namespace 被序列化的 XML 中,它们不会。

HTML 中的 SVG 看起来像这样......

<svg id="mydsvg" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

SVG 作为独立文档看起来像这样

<svg xmlns="https://www.w3.org/2000/svg" id="mydsvg" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

圆继承其父级的命名空间。

关于javascript - 如果不通过 createElementNS 处理,为什么动态 SVG 不能工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56364762/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com