49

SVG 図面内で foreignObject タグを使用して HTML を出力しようとしています。d3 を使用して要素を生成しています。foreignObject タグ内の HTML コンテンツが表示されるのは、foreignObect タグ内のコンテンツがプレーン テキストの場合のみです。それ以外の場合は、空/空白として表示されます。私の問題の例については、この jsfiddle を参照してください: http://jsfiddle.net/R9e3Y/29/

この要素を検査すると、foreignObject タグ内のコンテンツが表示されます。

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <foreignObject x="40" y="40" width="100" height="100">
        <div>test</div>
    </foreignObject>
</svg>

しかし、画面に表示されませんか？コンテンツを表示するにはどうすればよいですか?

4

5 に答える 5

75

d3 を使用しているため、div が html div であり、svg 名前空間の要素ではないことを d3 に伝える必要があります。試す

.append("xhtml:div")
于 2012-12-12T21:17:20.227 に答える
19

<foreignObject>HTML だけでなく、あらゆる種類のマークアップを埋め込むことができます。つまり、どの言語が使用されているかを判断する方法が必要です。そこで名前空間の出番です。

SVG にどのような種類があるかを伝えるforeignObjectには、コンテンツを適切な名前空間に配置する必要があります。

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <foreignObject x="40" y="40" width="100" height="100">
    <div xmlns="http://www.w3.org/1999/xhtml">test</div>
  </foreignObject>
</svg>

あなたの例では、<div>要素は SVG 名前空間にあります。つまり、それは SVG 要素であり、HTML 要素ではありません (非標準要素ではありますが)。

この<foreignObject>要素には、requiredExtensions使用されている拡張機能をブラウザーに伝える属性もありますが、ブラウザーによってこの属性の解釈が異なるようです。そのため、設定しないことをお勧めします。

于 2012-12-12T21:11:09.333 に答える