1

最近开始在 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>
4

3 回答 3

1

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

Firefox 的实现<use>基本上是所有 DOM 元素的隐藏克隆，因此它们在克隆任何类型的内容时都没有任何问题。然而，其他浏览器更紧密地链接源和复制图形，并且没有任何外部对象的复制机制。

于 2015-01-07T16:12:56.867 回答
0

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

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

于 2015-01-06T19:03:30.560 回答
0

将您放在这里的代码保存为 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）

于 2012-10-02T17:01:15.007 回答