0
웹 응용 프로그램은 많은 이미지에 svg를 사용합니다. 때로는 그들을 배경 이미지로 넣을 수도 있고, 다른 경우 img 태그에 넣을 수도 있습니다. 문제는 동일한 크기의 동일한 페이지에서 두 가지 방법으로 동일한 svg를 사용하면 IE9가 두 번째 이미지 세트의 크기를 조정하지 못하는 것입니다.동일한 svg를 사용하는 img 및 span이 IE9에서 다른 크기로 렌더링됩니다.
예는 천 개 단어를 가치가있다 :
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>
크롬과 파이어 폭스에서, 그것은 멋지다. IE9에서는 하단 이미지가 모두 32 픽셀로 렌더링되고 컨테이너에 맞게 잘립니다. 스팬이나 이미지 중 하나를 제거하면 모두 훌륭하고 멋쟁이입니다.
또한 둘 중 하나의 이미지 URL을 'circle.svg?'로 변경하면 브라우저 캐시를 둘러 보려면 잘 작동합니다.
아무도이 문제를 해결할 수 있습니까? span 태그와 img 태그를 같은 SVG 컨텐츠로 동시에 표시하려면 어떻게해야합니까? 모든 img 태그를 스팬으로 변경 (또는 그 반대로)하는 것은 어렵습니다. 각 캐시에 가짜 쿼리 매개 변수를 추가하여 캐시를 다룰 수도 있습니다.