Chromeでこの非常に単純な例がFirefoxで動作しない理由を誰でも説明できますか？Firefoxで動的SVGが動作しない、Chromeで動作する
<!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タグで直接表示されても、グループは問題ではありません。何も表示されません。
私は自分自身の質問に答えています。
SVGでは、他のHTML要素と異なり、単純な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>
それは、Firefoxで私のために働いています。どのようにして「うまくいかない」のですか？ [JSFiddle]（https://jsfiddle.net/y10s8ha4/1/） – 4castle
最近のFirefoxでのみ動作します。 innerHTMLは単にSVGを処理する方法ではありません。 – FlorianB