Question

我正在尝试在我的网站上嵌入几个.svg文件。只要我使用Chrome，Firefox或我迄今为止测试的任何移动浏览器，一切似乎都能完美运行。但是，有一个例外：每当我在Windows Phone（Internet Explorer Mobile）上查看svg时，图像都会失真。

我想我已经找到了这种行为的原因：因为我希望任何svg的大小都是流畅的，所以我给它们一个基于百分比的宽度和一个自动高度。如前所述，这适用于大多数浏览器。然而，Internet-Explorer似乎忽略了height：auto，从而将svg拉伸到它的最大高度。

也就是说，一种解决方案是为每个.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"＆lt; -----注意大写

你不再需要宽度和高度属性，它们现在应该响应它们所在容器的大小（尽管你可能需要定义容器的大小，因为有时chrome会在svg下面渲染额外的空白区域如果没有定义）。

编辑：定义css中svg的宽度和高度也适用

这里是fiddle

SVG变形了

1 个答案: