internet-explorer - 需要使用 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"。 根据 Microsoft(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 有。