为什么这个SVG图形缩放在IE9和10(预览版)中没有?

时间:2011-10-10 10:43:51

标签: internet-explorer html5 svg cross-browser

根据IE website支持SVG。根据这个答案也是What are SVG (Scalable Vector Graphics) supported browsers?

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>

4 个答案:

答案 0 :(得分:19)

IE似乎错误处理了丢失的preserveAspectRatio属性。您可以通过添加preserveAspectRatio="xMinYMin slice"在IE中进行扩展,如下所示: http://jsfiddle.net/2UWNe/4/show

然而,IE显示的不是正确的行为,因此这种更改会导致其他浏览器的行为与IE不同。 (但是,Microsoft believes that they support preserveAspectRatio。)

我没有深入研究你的单位或内容边界框。你真正想要达到什么效果?

答案 1 :(得分:5)

SVG的缩放方式与JPG,PNG和GIF等具有明确定义尺寸的光栅图像的缩放方式相同。

您需要诉诸黑客以保证跨浏览器的相同显示。

试试这个:

<svg width="100%" height="100%" viewBox="0 0 480 360" preserveAspectRatio="xMidYMin slice" style="width: 100%; padding-bottom: 99.99%; height: 1px; overflow: visible; box-sizing: content-box; enable-background:new 0 0 381.1 381.1;" ... >

See Demo

Learn more

答案 2 :(得分:4)

问题在于您使用百分比表示高度和宽度,如此处所述(http://www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/)。

  

如果将宽度和高度定义为100%无用或者根本没有定义它们,这些浏览器将根据在中定义的点和形状来猜测尺寸应该是什么。 SVG文件的正文。

更改为width=480height=360,您应该没问题。

答案 3 :(得分:0)

另一种选择是使用视口单元。这样您的SVG将根据窗口的大小进行缩放:

<svg width="100%" height="20vw" viewBox="0 0 150 150"> 
      <rect x="10" y="10" width="150" height="130" fill="#00ff00"/>
</svg>

https://jsfiddle.net/orikon/qy43fb0p/