html5の動的svg

SVGノードがhtml5の第一級市民であると予想しましたが、予期しない動作が発生します（Firefox 55.0.2およびChrome 54.0.2840.71）。html5の動的svg

次のhtmlファイルでは、新しく作成されたsvg要素に大きな円が動的に追加されることが予想されます。代わりに、： - 新しいファイルに（>外側のHTMLは、スクリプトが削除されたコピー）は、静的な結果インスペクタが私に語っ

DOMが正しく修正された
何も
私はDOMをコピー＆ペースト

私は何が間違っていますか？ DOMとレンダリングされたバージョンの間にこの不一致があるのはなぜですか？どうすれば修正できますか？再描画？

NSサフィックスバージョンの関数（つまりcreateElementNSとsetAttributeNS）を使用すると、同様の結果が得られ、何も描画されません。ここで

が犯人である：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>bug dynamic svg</title> 
    <script type="text/javascript"> 
Element.prototype.grow = function (tag, attribute_map) { 
    var child = document.createElement(tag); 
    if (attribute_map !== undefined) { 
     for (let key in attribute_map) { 
      child.setAttribute(key, attribute_map[key]); 
     } 
    } 
    this.appendChild(child); 
    return child; 
}; 
    </script> 
</head> 
<body> 
<div id="sandbox"><svg viewbox="0 0 200 200"></svg></div> 
<script> 
var g_svg = document.getElementById("sandbox").firstElementChild; 
g_svg.grow('circle', {'cx':"100", 'cy':"100", 'r':"32"}); 
</script> 
</html>

、ここでは、私が（手動で削除スクリプト）インスペクタを経由して取得するDOM-コピー＆ペーストの結果である：

<html><head> 
    <meta charset="utf-8"> 
    <title>bug dynamic svg</title> 
</head> 
<body> 
<div id="sandbox"><svg viewBox="0 0 200 200"><circle cx="100" cy="100" r="32"></circle></svg></div> 
</body></html>

出典

2017-08-23 yota

要素はSVG名前空間に行きます属性は通常そうではありません。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>bug dynamic svg</title> 
 
    <script type="text/javascript"> 
 
Element.prototype.grow = function (tag, attribute_map) { 
 
    var child = document.createElementNS('http://www.w3.org/2000/svg', tag); 
 
    if (attribute_map !== undefined) { 
 
     for (let key in attribute_map) { 
 
      child.setAttribute(key, attribute_map[key]); 
 
     } 
 
    } 
 
    this.appendChild(child); 
 
    return child; 
 
}; 
 
    </script> 
 
</head> 
 
<body> 
 
<div id="sandbox"><svg viewbox="0 0 200 200"></svg></div> 
 
<script> 
 
var g_svg = document.getElementById("sandbox").firstElementChild; 
 
g_svg.grow('circle', {'cx':"100", 'cy':"100", 'r':"32"}); 
 
</script> 
 
</html>

出典

2017-08-23 09:32:31

確かに...名前空間の属性があるため "のxml：スペースの属性の種類が...私はそれを知っていました！しかし、私はそれを逃した...ありがとう^ 3 ^ – yota

答えて

関連する問題