9

divを含むforeignObjectを持つSVG要素があります。次に、私のjsでこれを行います：

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

div内にキャンバスを作成します。2 つのブラウザーの firebug html コードを見ると、次のようになります。

ファイアフォックス:

<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>

クロム：

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

クロムでは、divさえ表示されません。私がdivを作成する方法は

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

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

Firefox は期待どおりに動作しています。しかし、クロムはそうではありません。誰か提案はありますか？

また、問題の一部は、chrome firebug HTML 出力には「foreignobject」が表示されますが、Firefox には追加した方法で「foreignObject」が表示されることだと思います。

4

2 に答える 2

6

HTML 本文を外部オブジェクトのサブ要素にする必要があります。これがあれば、体内に何でも入れることができます。

于 2012-07-13T13:41:39.677 に答える