Firefox에서 작동하는 동적 SVG가 Chrome에서 작동합니다.

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 태그에서 직접 그룹을 나타내더라도 그룹은 상관 없습니다. 아무 것도 표시되지 않습니다.

출처

2016-08-29 FlorianB

그래서이 솔루션입니다. 어떤 방식으로 "작동하지 않습니까?" [JSFiddle] (https://jsfiddle.net/y10s8ha4/1/) – 4castle

최근 Firefox에서만 작동합니다. innerHTML은 단순히 SVG를 다루는 방법이 아닙니다. – FlorianB

-1

그래, 사실 내 자신의 질문에 대답.

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>

출처

2016-08-30 00:04:15 FlorianB

[bug 886390] (https://bugzilla.mozilla.org/show_bug.cgi?id=886390)에 따르면 innerhtml은 html5의 SVG 요소에서 올바른 작업 (tm)을 수행해야합니다. – the8472

이전 버전의 Firefox에서는 그렇지 않나요? 왜 부정적으로 평가합니까? 평가하기 전에 innerHTML을 시도한 브라우저의 수는 얼마입니까? – FlorianB

질문은 firefox에 관한 것이 었으며 최소 버전을 지정하지 않았습니다. – the8472

Firefox에서 작동하는 동적 SVG가 Chrome에서 작동합니다.

답변

관련 문제