svg filter滤镜的属性设置问题

Question

请问filter的x,y,width,height是根据什么设置的？？
我想做一个path形状的阴影，但是不会设置这四个属性，它们和path的大小，滤镜的偏移dx,dy有什么样的数值关系呢？？

Answer 1

实现方案：SVG滤镜

• 结构：

<defs>
    
    <filter id="shape_shadow" x="-50%" y="-50%" width="200%" height="200%">
    
    <feColorMatrix values="0 0 0 0 0
    
                           0 0 0 0 0
    
                           0 0 0 0 0
    
                           0 0 0 1 0" 
    
                   type="matrix"
    
                   in="SourceAlpha"
    
                   result="matrix"
    
                   color-interpolation-filters="sRGB">
    
    </feColorMatrix>
    
    <feOffset dx="50" dy="50" in="matrix" result="offset"></feOffset>
    
    <feGaussianBlur stdDeviation="20" in="offset" result="blur"></feGaussianBlur>
    
    <feMerge>
    
    <feMergeNode in="blur"></feMergeNode>
    
    <feMergeNode in="SourceGraphic"></feMergeNode>
    
    </feMerge>
    
    </filter>
    
    </defs>

• 参数设置：

1. 颜色、透明度：

feColorMatrix标签内values属性

设置RGB矩阵内最后一列的常量偏移，即预设置颜色的RGB分别除以255

透明度即为最后一行倒数第二列的alpha值

<feColorMatrix values="0 0 0 0 R/255          

                       0 0 0 0 G/255         

                       0 0 0 0 B/255   

                       0 0 0 1 0" >   

</feColorMatrix>

2.偏移X，偏移Y，模糊值：

<filter id="shape_shadow" 

        x="-(width-100-stdDeviation)%" 

        y="-(width-100-stdDeviation)%" 

        width="(100%+dx+stdDeviation)" 

        height="(100%+dx+stdDeviation)"

>
<feOffset dx="偏移X值" dy="偏移Y值" in="matrix" result="offset"></feOffset>

<feGaussianBlur stdDeviation="模糊值" in="offset" result="blur"></feGaussianBlur>