Question

任何人都可以解释为什么这个非常简单的示例在Firefox中无法正常工作？

<!DOCTYPE html>
<html>
<body>

<svg width=600 height=400>
    <g id=thegroup style="stroke:#ff4000;stroke-width:3"></g>
</svg>

<script>
    var thegroup = document.getElementById('thegroup');
    thegroup.innerHTML = '<line x1=0 y1=0 x2=100 y2=100 />';
    alert(thegroup.innerHTML);
</script>

</body>
</html>

注意：组与否无关紧要，即使直接在SVG标签中也没有显示任何内容。

Answer 1

好的，事实上我回答了我自己的问题。

与其他HTML元素不同，SVG不能仅使用简单的innerHTML创建。我们必须使用createElementNS。

所以这就是解决方案：

<script>
    var thegroup = document.getElementById('thegroup');
    var element = document.createElementNS("http://www.w3.org/2000/svg", "line");
    element.setAttributeNS(null, 'x1', 0);
    element.setAttributeNS(null, 'y1', 0);
    element.setAttributeNS(null, 'x2', 100);
    element.setAttributeNS(null, 'y2', 100);
    element.setAttributeNS(null, 'style', 'stroke:#ff4000;stroke-width:3');
    thegroup.appendChild(element);
    alert(thegroup.innerHTML);
</script>

动态SVG在Firefox中不起作用，适用于Chrome

1 个答案: