关于SVG使用和线性格式的IE10和11怪癖

Question

我正在创建一个SVG精灵，以便它可以在整个站点中多次重复使用。为了使用精灵，我只是使用<use>，以便符号嵌入阴影DOM中：

<!-- Icon -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
      <linearGradient id="grad1" x1="0" x2="0" y1="1" y2="0">
        <stop stop-color="steelblue" stop-opacity="1" offset="0%" />
        <stop stop-color="steelblue" stop-opacity="0" offset="100%" />
      </linearGradient>
    </defs>
  <use xlink:href="#svg-icon-grad" />
</svg>

<!-- Sprite -->
<svg style="display: none">
  <symbol id="svg-icon-grad" viewBox="0 0 250 100">
    <rect fill="url(#grad1)" x="0" y="0" width="100" height="100" />
  </symbol>
</svg>

问题在于，当我尝试使用<linearGradient>作为填充属性时，它会在IE10和11中中断。奇怪的是，它在IE9，Chrome，Firefox，Safari和Opera中运行得非常好。< / p>

我知道如果我避免使用<use>而是直接嵌入<symbol>的内容，则线性渐变将在IE10和11中有效。但是，我希望避免这种情况，因为我更喜欢精灵存储在一个单独的文件中，以便于维护。

以下是代码段：

svg {
  display: block;
  width: 250px;
  height: 100px;
}

<!-- Icon with fill -->
This is an icon with a fill, works in all browsers
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <use xlink:href="#svg-icon-fill" />
</svg>

<hr />

<!-- Icon with linear gradient -->
This is an icon with linear gradient, works in all browsers but breaks in IE10 and IE11 only (works in IE9)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
      <linearGradient id="grad1" x1="0" x2="0" y1="1" y2="0">
        <stop stop-color="steelblue" stop-opacity="1" offset="0%" />
        <stop stop-color="steelblue" stop-opacity="0" offset="100%" />
      </linearGradient>
      <linearGradient id="grad2" x1="0" x2="0" y1="1" y2="0">
        <stop stop-color="red" stop-opacity="1" offset="0%" />
        <stop stop-color="red" stop-opacity="0" offset="100%" />
      </linearGradient>
    </defs>
  <use xlink:href="#svg-icon-grad" />
</svg>

<!-- Sprite -->
<svg style="display: none">
  <symbol id="svg-icon-fill" viewBox="0 0 250 100">
    <rect fill="steelblue" x="0" y="0" width="100" height="100" />
    <circle fill="red" cx="200" cy="50" r="50" />
  </symbol>
  <symbol id="svg-icon-grad" viewBox="0 0 250 100">
    <rect fill="url(#grad1)" x="0" y="0" width="100" height="100" />
    <circle fill="url(#grad2)" cx="200" cy="50" r="50" />
  </symbol>
</svg>

附件是各种浏览器中的屏幕截图：

IE9（正常）：

IE10（破碎）：

IE11（破碎）：

Chrome（正常）：

Firefox（正常）：

Safari（正常）：

Answer 1

而不是display: none隐藏＆＃34;精灵＆＃34;，而是使用width="0"和height="0"。

＆＃13;

＆＃13;

svg {
  display: block;
  width: 250px;
  height: 100px;
}

＆＃13;

<!-- Icon with fill -->
This is an icon with a fill, works in all browsers
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <use xlink:href="#svg-icon-fill" />
</svg>

<hr />

<!-- Icon with linear gradient -->
This is an icon with linear gradient, works in all browsers but breaks in IE10 and IE11 only (works in IE9)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
      <linearGradient id="grad1" x1="0" x2="0" y1="1" y2="0">
        <stop stop-color="steelblue" stop-opacity="1" offset="0%" />
        <stop stop-color="steelblue" stop-opacity="0" offset="100%" />
      </linearGradient>
      <linearGradient id="grad2" x1="0" x2="0" y1="1" y2="0">
        <stop stop-color="red" stop-opacity="1" offset="0%" />
        <stop stop-color="red" stop-opacity="0" offset="100%" />
      </linearGradient>
    </defs>
  <use xlink:href="#svg-icon-grad" />
</svg>

<!-- Sprite -->
<svg style="width:0; height:0; visibility:hidden;">
  <symbol id="svg-icon-fill" viewBox="0 0 250 100">
    <rect fill="steelblue" x="0" y="0" width="100" height="100" />
    <circle fill="red" cx="200" cy="50" r="50" />
  </symbol>
  <symbol id="svg-icon-grad" viewBox="0 0 250 100">
    <rect fill="url(#grad1)" x="0" y="0" width="100" height="100" />
    <circle fill="url(#grad2)" cx="200" cy="50" r="50" />
  </symbol>
</svg>

＆＃13;

＆＃13;

＆＃13;