为什么这个SVG图形不会在IE9和10（预览）中缩放？ [英] Why doesn't this SVG graphic scale in IE9 and 10 (preview)?

问题描述

根据 IE网站，支持SVG。而且根据这个回答什么是SVG（Scalable Vector Graphics）支持的浏览器？

According to IE website SVG is supported. And according to this answer too 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>

推荐答案

IE似乎在处理缺少的 preserveAspectRatio 属性。您可以通过添加 preserveAspectRatio =xMinYMin slice在IE中扩展，如下所示：
http://jsfiddle.net/2UWNe/4/show

IE seems to be mishandling the missing preserveAspectRatio attribute. You can get it to scale in IE by adding preserveAspectRatio="xMinYMin slice" as seen here: http://jsfiddle.net/2UWNe/4/show

但是，IE显示的不是正确的行为，因此此更改会导致其他浏览器的行为不同于IE。 （但是，Microsoft 认为他们支持 preserveAspectRatio 。）

However, what IE is showing is not the correct behavior, and thus this change causes other browsers to behave differently than IE. (Microsoft, however, believes that they support preserveAspectRatio.)

我没有仔细看你的单位或内容边界框。你真正想达到什么效果？

I haven't looked deeply at your units or content bounding boxes. What effect are you really trying to achieve?

这篇关于为什么这个SVG图形不会在IE9和10（预览）中缩放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！