SVG图像标签在Firefox或IE中不起作用

问题描述：

以下SVG <image>标记在Firefox 25或IE10中未显示任何内容.它确实可以在Chrome浏览器中使用.我在做什么错，在这里?

The following SVG <image> tag is not displaying anything in Firefox 25 or IE10. It does work in Chrome. What am I doing wrong, here?

test.html

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script type="text/javascript">
    </script>
  </head>
  <body>
    <svg width="4in" height="3in" version="1.1" viewBox="0 0 500 500"
        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image x="50" y="50" width="100px" height="100px" xlink:href="test.svg"></image>
    </svg>
  </body>
</html>

test.svg

<svg xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="463.85715"
   height="375.28571"
   id="svg2">
  <g
     id="layer1">
    <rect
       width="462.85715"
       height="374.28571"
       x="145.71429"
       y="80.933617"
       id="rect2985"
       style="fill:#ff0000;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
  </g>
</svg>

答

问题是svg文件中的根元素需要viewBox属性.这就是我从正在处理的测试用例中删除Inkscape的代码所得到的...

The problem was that the root element in the svg file needed a viewBox attribute. That's what I get for removing Inkscape's code from the test case I was working on...

SVG图像标签在Firefox或IE中不起作用

相关推荐