使用 Javascript 进行更改后，如何让 SVG 在浏览器中刷新？

Question

我正在尝试编辑的页面上有一个 SVG。 当我在进行更改后查看控制台中的元素时，我可以看到源看起来是正确的。 然而，它不会在浏览器中升级。 我怀疑这是某种缓存问题？ 否则我会错过一些基本的东西。 这是例子：

<div class="svg">
    <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 40" style="background-color: #333;">
        <line x1="10" x2="40" y1="40" y2="10" stroke="red"></line>
    </svg>
</div>
<script>
const svg = document.getElementById('svg');
const svgNS = svg.getAttribute('xmlns');
const line = document.createElementNS(svgNS, 'line');
line.setAttributeNS(svgNS, 'x1', '10');
line.setAttributeNS(svgNS, 'x2', '40');
line.setAttributeNS(svgNS, 'y1', '10');
line.setAttributeNS(svgNS, 'y2', '40');
line.setAttributeNS(svgNS, 'stroke', 'red');
svg.appendChild(line);
console.log(svg);
</script>

非常简单，SVG 带有一个红色斜杠，我试图通过在另一个方向添加斜杠来动态地将其变成 X。 当我查看控制台时，我看到了这个：

<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 40" style="background-color: #333;">
    <line x1="10" x2="40" y1="40" y2="10" stroke="red"></line>
    <line x1="10" x2="40" y1="10" y2="40" stroke="red"></line>
</svg>

然而浏览器仍然只显示一个斜杠。 大多数其他类似问题的答案都表明在编辑时指定名称空间。 我正在做这个。 我错过了什么？

Answer 1

设置属性时无需设置命名空间。 请改用

line.setAttribute(...

或

line.setAttributeNS(null...

。