根据IE网站 http://msdn.microsoft.com/en-us/ie/hh410107.aspx支持 SVG。也根据这个答案什么是支持 SVG(可缩放矢量图形)的浏览器? https://stackoverflow.com/questions/3656162/what-are-svg-scalable-vector-graphics-supported-browsers/3656242#3656242
http://jsfiddle.net/jitendravyas/2UWNe/show/ http://jsfiddle.net/jitendravyas/2UWNe/show/
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 480 360"
xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="button_surface" gradientUnits="objectBoundingBox"
x1="1" x2="1" y1="0" y2="1">
<stop stop-color="#434343" offset="0"/>
<stop stop-color="#000000" offset="0.67"/>
</linearGradient>
<linearGradient id="virtual_light" gradientUnits="objectBoundingBox"
x1="0" x2="0" y1="0" y2="1">
<stop stop-color="#EEEEEE" offset="0" stop-opacity="1"/>
<stop stop-color="#EEEEEE" offset="0.4" stop-opacity="0"/>
</linearGradient>
</defs>
<!-- button content -->
<rect x="10" y="10" rx="15" ry="15" width="150" height="80"
fill="url(#button_surface)" stroke="#363636"/>
<text x="30" y="55" fill="white"
font-family="Tahoma" font-size="20" font-weight="500">
SVG Button
</text>
<!-- vitual lighting effect -->
<rect x="12" y="12" rx="15" ry="15" width="146" height="76"
fill="url(#virtual_light)" stroke="#FFFFFF" stroke-opacity="0.4"/>
</svg>
IE 似乎对缺失处理不当preserveAspectRatio http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute属性。您可以通过添加来使其在 IE 中缩放preserveAspectRatio="xMinYMin slice"
如这里所示:http://jsfiddle.net/2UWNe/4/show http://jsfiddle.net/2UWNe/4/show
但是,IE 显示的行为不正确,因此此更改会导致其他浏览器的行为与 IE 不同。 (然而,微软相信他们支持preserveAspectRatio http://msdn.microsoft.com/en-us/library/ff972114.aspx.)
我没有深入研究你的单位或内容边界框。你真正想达到什么效果?
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)