html - SVG 变形

Question

我正在尝试在我的网站上嵌入多个 .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>

Answer 1

如果您想要一些响应式 SVG，请将此新属性添加到 svg 标签:

preserveAspectRatio="xMinYMin meet" <-----注意大小写

您不再需要 width 和 height 属性，它们现在应该响应地符合它们所在容器的大小(尽管您可能需要定义容器的大小，因为有时 chrome 会在 svg 下方呈现额外的空白如果未定义)。

编辑:在 css 中定义 svg 的宽度和高度也有效

这是一个 fiddle