SVG中的HTML作爲SVG

最近開始在SVG中使用html。該代碼工作正常FireFox，但Chrome不顯示div內容。SVG中的HTML作爲SVG

你能幫我解決這個問題。下面是一個示例代碼，應該將div內容顯示爲「我的DIV」和機場符號。

的代碼保存爲提前my_div.svg

感謝。

 <?xml version="1.0" encoding="UTF-8"?> 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewport-fill="red"> 
     <defs> 
      <!-- My div --> 
      <symbol id="my_div" viewBox="0 0 50 50" > 
       <foreignObject x="0" y="0" width="50" height="50" fill="red"> 
        <body xmlns="http://www.w3.org/1999/xhtml" style="background:none transparent;" width="50" height="50"> 
         <div>MY DIV</div> 
        </body> 
       </foreignObject> 
      </symbol> 

      <!-- Airport Symbol --> 
      <symbol id="airport" viewBox="0 0 10 10"> 
       <path d="M 9.2,5 C 9.2,4.5 9.8,3.2 10,3 L 9,3 L 8,4 L 5.5,4 L 8,0 L 6,0 L 3,4 C 2,4 1,4.2 0.5,4.5 C 0,5 0,5 0.5,5.5 C 1,5.8 2,6 3,6 L 6,10 L 8,10 L 5.5,6 L 7.8,6 L 9,7 L 10,7 C 9.8,6.8 9.2,5.5 9.2,5 z "/> 
      </symbol> 

     </defs> 

     <g fill="red" transform="scale(18)" > 

      <g transform="translate(0, 0)"> 
      <use xlink:href="#my_div" width="5" height="5"/> 
      </g> 

      <g id="demo" transform="translate(0, 0)"> 
      <use xlink:href="#airport" x="10" y="0" width="5" height="5"/> 
     </g> 

    </g> 
    </svg>

來源

2012-10-02 viskii420

看起來像Chrome只支持foreignObject - 請參閱http://caniuse.com/#feat=svg-html –

救了你的代碼，你把這裏當作一個SVG和我收到這樣的：

此頁面包含以下錯誤：在第6列

第1行錯誤：XML聲明允許僅在開始的文檔下面是頁面渲染到第一個的錯誤。

我通過簡單地刪除您提供的第一行代碼來修復它。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewport-fill="red"> 
     <defs> 
      <!-- My div --> 
      <symbol id="my_div" viewBox="0 0 50 50" > 
       <foreignObject x="0" y="0" width="50" height="50" fill="red"> 
        <body xmlns="http://www.w3.org/1999/xhtml" style="background:none transparent;" width="50" height="50"> 
         <div>MY DIV</div> 
        </body> 
       </foreignObject> 
      </symbol> 

      <!-- Airport Symbol --> 
      <symbol id="airport" viewBox="0 0 10 10"> 
       <path d="M 9.2,5 C 9.2,4.5 9.8,3.2 10,3 L 9,3 L 8,4 L 5.5,4 L 8,0 L 6,0 L 3,4 C 2,4 1,4.2 0.5,4.5 C 0,5 0,5 0.5,5.5 C 1,5.8 2,6 3,6 L 6,10 L 8,10 L 5.5,6 L 7.8,6 L 9,7 L 10,7 C 9.8,6.8 9.2,5.5 9.2,5 z "/> 
      </symbol> 

     </defs> 

     <g fill="red" transform="scale(18)" > 

      <g transform="translate(0, 0)"> 
      <use xlink:href="#my_div" width="5" height="5"/> 
      </g> 

      <g id="demo" transform="translate(0, 0)"> 
      <use xlink:href="#airport" x="10" y="0" width="5" height="5"/> 
     </g> 

    </g> 
    </svg>

這個工作在Chrome對我來說，（MAC）

來源

2012-10-02 17:01:15

在代碼的開頭有一個空格。對不起。什麼版本的Chrome顯示內部div「我的DIV」。 – viskii420