Question

我们使用img标签包含的svg图标在IE9中显示时会被错误地调整大小，剪切或完全隐藏。

https://gist.github.com/larrybotha/7881691中的解决方案（设置viewBox，删除宽度和高度）没有帮助，也没有将图像包含为背景。

当使用标签包含时，SVG显示正常（但是它们不会在某些现代浏览器中显示，如chrome）

我们使用的其中一个图标有以下来源：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generated by IcoMoon.io -->
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 640 640">
 <metadata id="metadata167">
  <rdf:RDF>
   <cc:Work rdf:about="">
    <dc:format>image/svg+xml</dc:format>
    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
    <dc:title/>
   </cc:Work>
  </rdf:RDF>
 </metadata>
 <path id="path161" fill="#c6c6c6" d="m227.88,640.44c-19.924,0-38.795-9.298-50.887-25.329l-163.69-216.1c-21.298-28.12-15.756-68.15,12.367-89.45,28.169-21.34,68.155-15.76,89.456,12.37l107.68,142.17,270.79-434.72c18.64-29.909,58.03-39.07,87.98-20.428,29.91,18.596,39.07,58.032,20.39,87.942l-319.85,513.45c-11.13,17.909-30.321,29.131-51.345,30.047-0.96187,0.0458-1.9237,0.0458-2.8856,0.0458z" stroke="#c6c6c6"/>
</svg>

我们如何才能在IE9中正确渲染SVG？

Answer 1

我无法确定这会在没有看到您遇到问题的具体代码的情况下回答您的问题，Jakub。但我总是在每个SVG元素中包含以下属性，至少。这总是给我一个很好的跨浏览器一致性，回到IE9：

<svg height="40" version="1.1" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg">

如果这没有帮助，您可以分享您的代码吗？

Answer 2

将svg包装成div并给它一个宽度似乎对我来说很好。

http://codepen.io/anon/pen/qONXzz

.svg-test{
   width: 50px;
}

Answer 3

似乎嵌入和调整在所有浏览器中都能正常工作的外部xml文件的唯一方法是http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial

中描述的方法

所以而不是

<img src="./images/icons/icons-complete.svg" style="width: 11px;height:11px;"/>

你可以使用

<svg height="11" width="11" 
                         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g transform="scale(0.0172)">
         <image x="0" y="0" height="640" width="640"  xlink:href="/images/icons/icons-complete.svg"/>
    </g>
</svg>

IE9中的svg图标无法正确显示

3 个答案: