img 和 span 具有相同的 svg 在 IE9 中以不同尺寸渲染

发布于 2024-12-03 15:07:47 字数 1920 浏览 1 评论 0原文

我们的网络应用程序的许多图像都使用 svg。有时我们将它们放在 span 中作为背景图像，有时我们将它们放在 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 中，底部图像全部以 32 像素渲染，并进行裁剪以适合容器。如果删除跨度或图像，一切都很好。

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

有谁知道这有什么解决方法吗？如何同时显示具有相同 SVG 内容的 span 和 img 标签？将所有 img 标签更改为 span（或反之亦然）的前景令人望而生畏，就像向每个标签添加一个假查询参数以绕过缓存一样。

原文

Our web app uses svg for a lot of its images. Sometimes we put them in spans as background images, other times we put them in img tags. The problem is, if we have the same svg used in both ways on the same page at different sizes, IE9 fails to resize the 2nd set of images.

An example is worth 1000 words:

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>

In Chrome and Firefox, it looks great. In IE9, the bottom images are all rendered at 32px, and cropped to fit the container. If you remove either the spans or the images, all is fine and dandy.

Also, if you change the image url for either of them to 'circle.svg?' to get around browser cache, it also works fine.

Does anyone know any work arounds to this? How can I display both span and img tags with the same SVG content at the same time? The prospect of either changing all img tags to spans (or vice versa) is daunting, as is adding a fake query parameter to each one to get around cache.

分享到QQ

分享到微博