SVG foreignObjectがChromeに表示されない

divを含むforeignObjectを持つSVG要素があります。私のjsで私はこれを行う：SVG foreignObjectがChromeに表示されない

$("#wrapper>svg>foreignObject>div").sparkline(data);

div内にキャンバスを作成する。私は2つのブラウザのための放火犯のHTMLコードを見てみると、次のとおりです。

のFirefox：

<svg> 
    <foreignObject width="20" height="20" x="10" y="-10"> 
     <div> 
      <canvas style="display: inline-block; width: 18px; height: 19px; vertical-align: top;" width="18" height="19"></canvas> 
     </div> 
    </foreignObject> 
</svg>

はクローム：Chromeで

<svg> 
    <foreignobject width="20" height="20" x="10" y="-10"/> 
<svg>

それもdiv要素を示してdoesntの。私がdivを作成する方法は、

nodeEnter.append("foreignObject") 
    .attr("width", "20") 
    .attr("height", "20") 
    .attr("x", "10") 
    .attr("y","-10"); 

$("#wrapper>svg>foreignObject").append("<div></div>");

私はそれが動作することを期待しています。しかし、クロムはそうではありません。誰にも何か提案はありますか？

また、chrome firebugのHTML出力は "foreignobject"と表示されていますが、Firefoxでは "foreignObject"と表示されています。

出典

2012-06-25 ßee

foreignobjectのサブ要素であるHTML本文を持つ必要があります。一度それを持っていると、体の中に何かを置くことができます。

出典

2012-07-13 13:41:39 Demosthenes

Cool @Demosthenesはうまくいきました。 –

Chromeの動作が変更され、サブエレメントがにラップされているように見えるため、これを更新する価値があります。間違いなくEdgeはどちらの方法も気にしません。どちらのブラウザでも名前空間は必要ありません（しかし、他のブラウザはまだまだ厄介かもしれません）。 – dav1dsm1th

会話に追加するだけで、いくつかのマークアップがあります。 ChromeとFirefoxの動作が異なり、これらのスタイルタグは違いをなくしました（html resetに追加しますか？）あなたは明らかに、HTMLボディをタグ上の名前空間参照xmlnsと同じくらい必要としません。bodyまたは単にdivです。また、サポートされている機能をテストするには、おそらくsvg switchタグを考慮する必要があります。

<!doctype html><html><body> 

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="300px"> 
    <foreignObject width="100" height="57"> 
    <div xmlns="http://www.w3.org/1999/xhtml" style="position:relative; 
     width:100px;height:57px;overflow:hidden;font-family:Arial; 
     font-weight:400;font-size:12px;line-height:100%;"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing egplit, sed do eiusmod 
      tempor incididunt ut labore 
    </div> 
    </foreignObject> 
</svg> 

</body></html>

出典

2016-05-09 20:07:03

SVG foreignObjectがChromeに表示されない

答えて

関連する問題