SVG 中的 HTML 作为 SVG答案

【问题标题】：HTML in SVG as SVGSVG 中的 HTML 作为 SVG
【发布时间】：2012-09-23 13:34:21
【问题描述】：

最近开始在 SVG 中使用 html。该代码在 FireFox 上运行良好，但 Chrome 不显示 div 内容。

你能帮我解决这个问题吗？这是一个示例代码，应该将 div 内容显示为“MY 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>

【问题讨论】：

看起来 Chrome 仅部分支持 foreignObject - 请参阅 caniuse.com/#feat=svg-html

标签： html svg symbols

【解决方案1】：

将您放在这里的代码保存为 SVG，我收到了这个：

此页面包含以下错误：

第 1 行第 6 列的错误：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)

【讨论】：

代码开头有空格。对此感到抱歉。哪个版本的 Chrome 显示内部 div“MY DIV”。

【解决方案2】：

我知道它不能解决该错误，但我建议使用 SVG 而不通过 foreignObject 将 HTML 混合到其中。滞后于 IE 的支持，也可以使用 svg 元素来解决。您可以使用 css 设置样式，就像您在 div 框中的文本一样。

示例：http://www.w3schools.com/svg/svg_text.asp

【讨论】：

【解决方案3】：

SVG 规范不允许 <foreignObject> 内容直接与 <use> 元素一起使用。浏览器在实现是否允许您使用包含<foreignObject> 子项的<use> 内容方面存在差异——规范并未明确禁止，但它在某种程度上规避了意图。

Firefox 对<use> 的实现基本上是所有 DOM 元素的隐藏克隆，因此它们在克隆任何类型的内容时都没有任何问题。但是其他浏览器对源图和复制图的链接比较强，对foreignObjects没有任何复制机制。

【讨论】：