SVG图像标签在Firefox或IE中不起作用 [英] SVG image tag not working in Firefox or IE
本文介绍了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
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中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
