我正在尝试在我的网站上嵌入多个 .svg 文件。 只要我使用 Chrome、Firefox 或我目前测试过的任何移动浏览器，一切似乎都运行良好。但是，有一个异常(exception):每当我在 Windows Phone (Internet Explorer Mobile) 上查看 svg 时，图像都会失真。
我想我已经找到了这种行为的原因:因为我希望任何 svg 的大小都是流动的，所以我给了它们一个基于百分比的宽度和一个自动高度。如前所述，这适用于大多数浏览器。然而，Internet-Explorer 似乎忽略了 height:auto 从而将 svg 拉伸(stretch)到它的最大高度。
也就是说，一种解决方案是为每个 .svg 分配固定尺寸。 但这会牺牲响应式设计的理念。
有人知道问题出在哪里吗？
哦，这是指向我网站页面的链接，其中包含一个 svg(黑色“星号”表示“选择”):
http://alexanderschlosser.de/select.html
非常感谢! 亚历克斯
编辑:这是其中一个嵌入式 SVG 的代码。
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!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="90px" height="90px" viewBox="0 0 90 90" enable-background="new 0 0 90 90" xml:space="preserve">
<path fill="#E64132" d="M45,87.25C21.703,87.25,2.75,68.297,2.75,45S21.703,2.75,45,2.75S87.25,21.703,87.25,45
S68.297,87.25,45,87.25"/>
<path fill="#FFFFFF" d="M45,5.5c21.78,0,39.5,17.72,39.5,39.5c0,21.78-17.72,39.5-39.5,39.5C23.22,84.5,5.5,66.78,5.5,45
C5.5,23.22,23.22,5.5,45,5.5 M45,0C20.147,0,0,20.147,0,45c0,24.853,20.147,45,45,45c24.853,0,45-20.147,45-45
C90,20.147,69.853,0,45,0"/>
<path fill="none" stroke="#FFFFFF" stroke-width="5.5" stroke-miterlimit="10" d="M67.08,45c0,0-7.193-13.292-22.08-13.292
S22.92,45,22.92,45S30.113,58.292,45,58.292S67.08,45,67.08,45z"/>
<path fill="#FFFFFF" d="M50.433,45c0-3-2.433-5.433-5.433-5.433c-3,0-5.432,2.433-5.432,5.433S42,50.433,45,50.433
C48,50.433,50.433,48,50.433,45"/>
</svg>
最佳答案
如果您想要一些响应式 SVG，请将此新属性添加到 svg 标签:
preserveAspectRatio="xMinYMin meet" <-----注意大小写
您不再需要 width 和 height 属性，它们现在应该响应地符合它们所在容器的大小(尽管您可能需要定义容器的大小，因为有时 chrome 会在 svg 下方呈现额外的空白如果未定义)。
编辑:在 css 中定义 svg 的宽度和高度也有效
这是一个 fiddle
关于html - SVG 变形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23942464/