[SVG]line添加filter时，直线不会展示的问题

今天在做svg连线功能的时候，需要加一个阴影效果，用了filter，代码如下：

<defs>
    <filter id="f1" x="0" y="0" width="100%" height="100%">
        <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0"/>
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2.5"/>
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
    </filter>
</defs>

效果1.png

可是展示的效果不是我想要的，直线部分不见了。翻了不少的资料终于找到解决办法了，在filter中添加属性：filterUnits="userSpaceOnUse"
如下：

<defs>
    <filter id="f1" x="0" y="0" width="100%" height="100%" filterUnits="userSpaceOnUse">
        <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0"/>
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2.5"/>
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
    </filter>
</defs>

最终效果：

效果2.png

• 引用的话使用

style="filter:url(#f1)"

搞定收工、