SVG foreignObject不顯示在任何瀏覽器上，爲什麼？

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

問：我在做什麼錯？

更新：我注意到幾件事情：

添加xmlns="http://www.w3.org/1999/xhtml"到輸入使它顯示在邊緣。在其他瀏覽器上，它仍然是不可見的。
在Chrome上，如果通過選擇「編輯爲HTML」編輯外部<g>元素，但不做任何更改並退出編輯模式，則輸入顯示。
將requiredExtensions="http://www.w3.org/1999/xhtml"添加到foreignObject標籤和/或身體標籤沒有區別。

我必須失去了一些東西......

來源

2017-08-05 Edy Bourne

你是怎麼創造這個的？看起來像是在html命名空間而不是SVG命名空間。 BTW請不要張貼圖片的代碼，郵政編碼爲文本。 –

@RobertLongson嗨，謝謝你的回覆。我用代碼更新了帖子。它有g塊，但它們都是相似的，所以我將它們剝離出來，只留下有問題的塊。 –

如果我刪除轉換屬性（所以foreignObject在屏幕上），它會爲我顯示OK。 –

訣竅是從foreignObject標籤去除requiredExtensions="http://www.w3.org/1999/xhtml。當此屬性存在時，Chrome不會顯示任何內容，但當Chrome瀏覽器被刪除時，它可以在Chrome，IE和Firefox上使用。

不幸的是，我在Chrome上遇到了另一個bug（當文本溢出時，它在一個奇怪的地方呈現輸入內容），所以我不會再使用foreignObjects，但以防萬一任何人都是古怪的，我在最初的問題上工作。

來源

2017-08-14 21:33:36

SVG foreignObject不顯示在任何瀏覽器上，爲什麼？

回答

相關問題