Internet explorer 需要解决带有SVG属性过滤器单元的IE bug

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中运行得非常完美，但在IE10和IE11中，这两行代码被部分删除。IE中似乎不支持属性值

filterUnits=“userSpaceOnUse”

。 根据微软（和）的说法，

filterUnits

在IE9中不受支持，但在IE10+中受支持

---

是否有解决此问题的方法？

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

一种可怕但有效的方法是，绘制一个透明形状，该形状带有所需的过滤器尺寸以及水平线或垂直线，并将过滤器设置在一个组元素上，该组元素将该形状与所需形状分组

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

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

如果使用，结果在非IE浏览器上是可以的。在IE上，几乎水平的线仍然不可见。如果使用，结果在所有浏览器上都是正常的。但在IE上，如果线条完全水平或垂直，则会失败，例如。

<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>