svg-insertAdjacentHTMLはFirefox 35以降では動作していませんか？

Question

私はsvgを使って線を描こうとしています。だから私はinsertAdjacentHTMLに使用されました。しかし、これはクロームでは動作していますが、Firefoxでは動作しません。

var svgid = document.getElementById('svg_main'); 
var str_lne = 60; 
var data = '<path id="lineAB" d="M 50 '+str_lne+' L 1050 '+(str_lne)+'" transform="translate(0.5,0.5)" stroke="#707073" fill="none" storke-width="1px" opacity="1" ></path>'; 
svgid.insertAdjacentHTML('beforeend',data); 

それは（35以下）のfirefox上のローカルホストで実行されませんに従うよう

<div style="height:330px; width:1100px; background:#313131; margin:0 auto; "> 
    <svg id='svg_main' height="330" width="1100"></svg> 
</div> 

私のjavascriptをたどるよう

私のhtmlコードです。例えば

、

は、私は、Firefoxを開いて、今SVGラインが表示されていないURL（ローカルホスト/ svgtest.html）を入力します。しかし、私はctrl + sでページを保存し、Firefoxを開いてその行を表示します。

この問題から私を助け、問題の共振を明確にしてください。

Answer 1

次を交換してください：

svgid.insertAdjacentHTML('beforeend', data); 

次のように：

console.log('SVG\'s NS before insertion: ' + svgid.namespaceURI); 
svgid.insertAdjacentHTML('beforeend', data); 
console.log('SVG\'s NS after insertion: ' + svgid.namespaceURI); 
pathEl = document.getElementById('lineAB'); 
console.log('PATH\'s NS (after insertion): ' + pathEl.namespaceURI); 

を下記のFirefox 35かでそれを試してみてください。これは、SVG要素のネームスペースが、insertAdjacentHTMLの呼び出しの前後にあり、PATH要素の名前空間が挿入された後の名前空間を確認するためのものです。

this JSFiddleも試してみることができます。これには上記の修正が含まれています。

遭遇したことは、this bug reportに関連しています。このバグの修正はFirefox 36に上陸しました.Firefox 36までは、SVG要素の内部HTMLを混乱させると、その要素の推測されたsvg名前空間を尊重しません。挿入される要素はxhtml名前空間に属します。それでは、HTML要素としてPATH要素#lineABは意味をなさないので、ページから消えてしまいます。しかし、挿入されたPATH要素の名前空間（xhtml）はDOMに表示されないため、ページを保存するときに保存されないため、（私の推測です）したがって、保存されたページを開くと、PATH要素の名前空間が正しく推測され（SVG要素を継承している可能性があります）、結果としてSVGが表示されます。

上記のバグレポートの複製は、this bug reportであり、ここでより詳細な情報を得るために提供されています。

私はアプローチがVistaとFirefoxの35を使用して、市販のクロスブラウザテストプラットフォームで上に示唆してみました（私はあまりにも危険な住みたい）とコンソールログはsvg/svg/xhtmlました。 Firefox 36を使用してコンソールログはsvg/svg/svgでした。

var svgid = document.getElementById('svg_main'); 
var str_lne = 60; 
var pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path'); 
pathEl.setAttribute('id', 'lineAB'); 
pathEl.setAttribute('d', 'M 50 ' + str_lne + ' L 1050 ' + str_lne); 
pathEl.setAttribute('transform', 'translate(0.5,0.5)'); 
pathEl.style.stroke = '#707073'; 
pathEl.style.strokeWidth = '1px'; 
svgid.appendChild(pathEl); 

JSFiddle here：SVGへのパスを追加するためのFirefox 35で動作何

はこれです。つまり、要素を明示的に作成し、HTMLを直接挿入しないでください。

今、100万ドルの質問があります。 Firefox 35以降を気にかけているのはなぜですか？

Answer 2

あなたのコードはFirefoxで正常に動作します。あなたはタイプミス（storke-width）があるという事実を別にします。

var svgid = document.getElementById('svg_main'); 
 
var str_lne = 60; 
 
var data = '<path id="lineAB" d="M 50 '+str_lne+' L 1050 '+(str_lne)+'" transform="translate(0.5,0.5)" stroke="#707073" fill="none" stroke-width="1px" opacity="1" ></path>'; 
 
svgid.insertAdjacentHTML('beforeend',data);

<div style="height:330px; width:1100px; background:#313131; margin:0 auto; "> 
 
    <svg id='svg_main' height="330" width="1100"></svg> 
 
</div>