Question

我们的网络应用程序使用svg来处理很多图像。有时我们将它们作为背景图像放在跨度中，有时我们将它们放在img标签中。问题是，如果我们在同一页面上以不同的大小使用相同的svg，IE9无法调整第二组图像的大小。

一个例子值1000字：

的test.html

<!doctype html>
<html>
  <head><title>Foo</title></head>

  <style>
            .half { width: 16px; height: 16px; }
            .full { width: 32px; height: 32px; }  
            .double{ width: 64px; height: 64px; }

            span.img {
              display: inline-block;
              background-image: url('circle.svg');
              background-size: 100% 100%;
            }             
  </style>

  <body>            

    <b>Span</b><br />
    16: <span class="img half"></span>
    32: <span class="img full"></span>   
    64: <span class="img double"></span>
    <hr />

    <b>Img</b><br />
    16:<img src="circle.svg" class="half" />
    32:<img src="circle.svg" class="full" />   
    64:<img src="circle.svg" class="double" />
    <hr />

  </body>
</html>

circle.svg

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<g>
  <circle r="16" cx="16" cy="16" />
</g>
</svg>

在Chrome和Firefox中，它看起来很棒。在IE9中，底部图像全部以32px渲染，并裁剪以适合容器。如果你删除跨度或图像，一切都很好，花花公子。

另外，如果您将其中任何一个的图片网址更改为“circle.svg？”为了解决浏览器缓存问题，它也可以正常工作。

有谁知道这方面的任何工作？如何同时显示具有相同SVG内容的span和img标签？将所有img标签更改为跨度（或反之亦然）的前景令人生畏，就像为每个标签添加一个假查询参数来绕过缓存一样。

Answer 1

从SVG元素中删除width="32px" height="32px"将解决此问题

img和span在IE9中使用相同的svg渲染不同大小

1 个答案: