需要使用 SVG 属性 filterUnits 解决 IE 错误的解决方法

Question

IE 10+ 上的 SVG 过滤器的属性“filterUnits”似乎存在问题。这对（几乎）垂直或水平线上的阴影过滤器有影响，请参见以下示例：

<svg height="500" width="500">
    <defs>
        <filter id="f1" filterUnits="userSpaceOnUse" width="300%" height="300%">
            <feOffset result="offOut" in="SourceGraphic" dx="5" dy="5" />
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
    </defs>
    <line x1="10" y1="205" x2="400" y2="200" 
        style="stroke:rgb(255,0,0); stroke-width:20" filter="url(#f1)" />
    <line x1="200" y1="50" x2="220" y2="300" 
        style="stroke:rgb(255,0,255);stroke-width:20" filter="url(#f1)" />
</svg>

此示例在 Chrome 和 Firefox 中完美运行，但在 IE 10、11 中部分行被剪裁。似乎 IE 不支持属性值 filterUnits="userSpaceOnUse"。 根据微软（http://msdn.microsoft.com/en-us/library/ff934701%28v=vs.85%29.aspx 和http://msdn.microsoft.com/en-us/library/ie/hh773402%28v=vs.85%29.aspx）的说法，IE9 不支持filterUnits，但 IE10+ 支持。

这个问题有解决办法吗？

Answer 1

在计算过滤器区域时，IE11 似乎使用 0 的笔划宽度 - 无论您的笔划有多大，而且它似乎不支持在 userSpaceUnits 中指定过滤器区域（即使您告诉它）。这意味着水平或垂直线的过滤器区域在 y 和 x 维度上分别为零单位。

一个可怕但有效的技巧是使用您想要的过滤器尺寸以及水平或垂直线绘制一个透明形状，并将过滤器设置在一个组元素上，将该形状与您想要的形状一起分组。

这适用于 IE、Firefox、Chrome。 （网络是不是很棒！）

<svg x="0px" y="0px" height="500px" width="500px" viewbox="0 0 500 500">
    <defs>
        <filter id="f1" x="-200%" y="-200%" width="400%" height="800%">
            <feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" />
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
            <feComposite in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
    </defs>
    <line x1="10" y1="205" x2="400" y2="200" 
        style="stroke:rgb(255,0,0); stroke-width:20" filter="url(#f1)" />
    <line x1="200" y1="50" x2="220" y2="300" 
        style="stroke:rgb(255,0,255);stroke-width:20" filter="url(#f1)" />

  <g filter="url(#f1)">
  <line x1="10" y1="100" x2="400" y2="100" style="stroke:rgb(255,0,0);stroke-width:20"  />
    <line x1="10" y1="100" x2="400" y2="110" stroke="red" stroke-opacity="0" />
    <g>
</svg>

顺便说一句，这不是错误 - 规范不要求在计算边界框时考虑笔划宽度。 IE 不会，Firefox 会。