0
私はSVG要素にforeignObjectを持っています。他の要素はすべて表示されますが、foreignObjectはその内容とともに表示されません。 Chrome、Firefox、Edgeでテストしましたが、すべて同じ結果でした。SVG foreignObjectがブラウザに表示されない理由は何ですか？
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="v-2" width="100%" height="100%">
<g id="v-3" class="joint-viewport" transform="matrix(1,0,0,1,-1597.0002028000001,95.99995439999998)">
...
<g id="j_29" model-id="e8dbd7a4-5d3d-44e5-85a0-09413112a39b" class="joint-theme-default joint-cell joint-type-html joint-type-html-element joint-element" data-type="html.Element" fill="#ffffff" stroke="none" transform="translate(1898.0001898,268.0000346)">
<g class="rotatable" id="v-206">
<rect class="body" id="v-207" stroke="none" fill-opacity="0" fill="#ffffff" width="100" height="60"></rect>
<text class="label" id="v-208" font-size="14" y="0.8em" display="none" xml:space="preserve" fill="#000000" text-anchor="middle" font-family="Arial, helvetica, sans-serif" transform="matrix(1,0,0,1,125,20)">
<tspan id="v-209" class="v-line v-empty-line" dy="0em" x="0" style="fill-opacity: 0; stroke-opacity: 0;">-</tspan>
</text>
<foreignObject requiredExtensions="http://www.w3.org/1999/xhtml" width="100%" height="100">
<body xmlns="http://www.w3.org/1999/xhtml">
<input xmlns="http://www.w3.org/1999/xhtml" type="text" value="I'm HTML input">
</body>
</foreignObject>
</g>
</g>
</g>
<defs id="v-4"></defs>
</svg>
Q：は私が間違って何をやっている。ここ
は、コードのですか？
UPDATE：私はいくつかのことに気づいた：入力にxmlns="http://www.w3.org/1999/xhtml"を追加
- は、それがエッジの上に表示されます。他のブラウザでは、それはまだ見えません。
- Chromeで「
<g>」要素を「HTMLとして編集」を選択して編集しても、変更を加えずに編集モードを終了すると、入力が表示されます。 - を
foreignObjectタグに追加するか、bodyタグで違いはありません。 私は何かが欠けする必要があります
...
どのようにこれを作成していますか？ SVG名前空間ではなくhtml名前空間にあるように見えます。 BTWは、コードの画像、テキストとしてのポストコードを掲載しないでください。 –
@RobertLongsonこんにちは、返信いただきありがとうございます。私はポストをコードで更新しました。それは動きのブロックがありますが、それらはすべて似ているので、私はそれらを取り除き、問題のあるものだけを残しました。 –
変換属性を削除すると（foreignObjectが画面上に表示されるので）、私にはOKと表示されます。 –