Question

属性＆＃34; filterUnits＆＃34;似乎存在问题。用于IE 10+上的SVG过滤器。这对（几乎）垂直或水平线上的阴影滤波器有影响，请参见此示例：

<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 +不支持。{/ p>

此问题是否有解决方法？

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>

BTW这不是错误 - 规范在计算边界框时不需要考虑笔划宽度。 IE没有，Firefox确实如此。

需要使用SVG属性filterUnits来解决IE bug的变通方法

1 个答案: