我正在尝试在<img />
标签内部放置一个SVG图形,该标签适合(没有裁剪)标签内保留的纵横比。我在Inkscape中创建了SVG。除了Internet Explorer 9之外,它在所有浏览器上都按预期工作。
为了使它在IE 9上工作,我必须添加viewBox="0 0 580 220"
和preserveAspectRatio="xMidYMid meet"
并删除width="580"
和height="220"
SVG属性。
<svg viewBox="0 0 580 220" preserveAspectRatio="xMidYMid meet">...</svg>
这似乎无处不在,直到我在Webkit上尝试它,其中<img />
标签被垂直拉伸,尽管SVG的纵横比确实得到了保留。
当我放回width="580"
和height="220"
属性时,它适用于Webkit,但在IE 9上,aspectr比率丢失了。
是否有针对此行为的跨浏览器解决方案?
好像我找到了解决方案:
您需要在SVG中保留width
和height
属性。
<svg
width="580"
height="220"
viewBox="0 0 580 220"
preserveAspectRatio="xMidYMid meet"
>...</svg>
要使其在IE 9上运行,您需要指定<img />
标记的至少一个维度。
<img src="your.svg" style="width: 100%" />
这似乎无处不在。
我通过将以下CSS设置为:
宽度:100%; max-width :( px中的所需宽度)
在我的案例中的解决方案是使用Peter Hudec的答案,但由于在width: 100%;
标签上使用<img />
,这打破了每个非IE9浏览器的布局,我添加了一个仅IE9的CSS黑客(width: 100%\9\0;
)。希望这个补充对某人有帮助。 :-)
即使使用preserveAspectRatio="xMidYMid meet"
也没有必要。
(我想只添加一条评论,而不是回答,但还没有声明呢:-)
只是想我会添加我如何进入解决方案。我一开始很难搞清楚一些问题。
我在http://ivantown.com/posts/svg-scaling-with-ie/做了一个页面来更详细地描述它
只是一个额外的建议:如果您需要对所有svg内容执行此行为,并且无法控制标记,则使用基于.svg文件名后缀的属性选择器可能很有用。
例如
img[src$=".svg"] {
width:100%;
}