SVG线性渐变在ie11中不起作用答案

【问题标题】：SVG linear gradient dont work in ie11SVG线性渐变在ie11中不起作用
【发布时间】：2016-12-18 13:12:30
【问题描述】：

我在 SVG 文件中有这个渐变代码：

<linearGradient id="SVGRD" gradientUnits="userSpaceOnUse" x1="-243.3" y1="1257.3" x2="-242.3" y2="1257.3" gradientTransform="matrix(-64.7347 -199.2328 -199.2328 64.7347 234813.9219 -129743.9844)">
  <stop  offset="0" style="stop-color:#B3B3B3"/>
  <stop  offset="0.45" style="stop-color:#B3B3B3;stop-opacity:0.22"/>
  <stop  offset="1" style="stop-color:#B3B3B3;stop-opacity:0"/>
</linearGradient>
<path style="fill:url(#SVGRD);" d="M142.7,133L105,18.5H0V133H142.7z"/>

它似乎在 IE11 中不起作用。路径渲染时没有渐变和仅填充颜色。

SVG 被实现为图像。有什么建议？提前致谢！

【问题讨论】：

标签： internet-explorer svg linear-gradients

【解决方案1】：

梯度没有向量（x1=x2 和 y1=y2）。根据SVG specification，这种退化的情况应该导致单一颜色，这是最后的停止颜色。

如果这是 IE 显示的内容，那么这样做是完全正确的。给定这样的渐变，这肯定是 Firefox 会显示的内容。

【讨论】：

谢谢！这就是问题所在！
在我的特定情况下，两种颜色的linearGradient 没有定义第二种stop-color，并且由于IE11 将第二种颜色渲染为黑色，这破坏了预期的渲染。尽管此答案并未完全解决问题，但链接的文档提供了处理该问题的必要信息。将更详细地阅读它。