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