Question

我正在使用SVG过滤器在一些复杂路径上创建模糊的“阴影”类型效果。

<defs>
    <filter id="dropshadow" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
        <feColorMatrix result="hueOut" in="SourceAlpha" type="hueRotate" values="340"/>
        <feColorMatrix result="satOut" in="hueOut" type="saturate" values="3"/>
        <feGaussianBlur in="satOut" stdDeviation="8"/> 
        <feMerge> 
           <feMergeNode/>
           <feMergeNode in="SourceGraphic"/> 
        </feMerge>
    </filter>
</defs>

我完全通过反复试验得出了上述feColorMatrix值。（如果我单独使用矩阵数学，那么从黑暗到光线的色调变化特别美妙，我根本就不会想到。）基本上，我将色轮旋转340度，然后我让它饱和了在模糊之前使用值为3的颜色。（该规范过去对此有点不清楚，但试验和错误表明，type="saturate"的值超过1会使图像饱和，而低于1的值会使图像饱和。）

问题在于：我正在迭代大量的路径，双矩阵操作会使我的机器停止运转。它经常崩溃。

一些矩阵数学大师可以帮我算出数字，将上面的两个feColorMatrix滤波器组合成一个效率更高的feColorMatrix滤波器原型，类型=“矩阵”吗？我得到了spec的要点，但我在数学方面已经超出了我的想法。

Answer 1

根据我的经验，ColorMatrix操作速度非常快，而且模糊速度非常慢，所以我猜这些组合不会让你走得太远。但是FWIW，这是组合矩阵。（这不难做到 - 有很多在线矩阵乘数：）

2.5537  -0.61224    0.52246 0   0
-0.4163 1.30776 -0.10754    0   0
0.3037  -0.88224    2.3546  0   0
0   0   0   1   0
0   0   0   0   1

更新

一步一步确定。根据{{3}}，相当于饱和的矩阵是：

| R' |     |0.213+0.787s  0.715-0.715s  0.072-0.072s 0  0 |   | R |
| G' |     |0.213-0.213s  0.715+0.285s  0.072-0.072s 0  0 |   | G |
| B' |  =  |0.213-0.213s  0.715-0.715s  0.072+0.928s 0  0 | * | B |
| A' |     |           0            0             0  1  0 |   | A |
| 1  |     |           0            0             0  0  1 |   | 1 |

所以你所要做的就是建立一个excel表，为你增加倍数。

然后你看一下色调旋转的规格，你会发现huerotate的矩阵等效于：

| R' |     | a00  a01  a02  0  0 |   | R |
| G' |     | a10  a11  a12  0  0 |   | G |
| B' |  =  | a20  a21  a22  0  0 | * | B |
| A' |     | 0    0    0    1  0 |   | A |
| 1  |     | 0    0    0    0  1 |   | 1 |

其中术语a00，a01等的计算方法如下：

| a00 a01 a02 |    [+0.213 +0.715 +0.072]
| a10 a11 a12 | =  [+0.213 +0.715 +0.072] +
| a20 a21 a22 |    [+0.213 +0.715 +0.072]
                        [+0.787 -0.715 -0.072]
cos(hueRotate value) *  [-0.213 +0.285 -0.072] +
                        [-0.213 -0.715 +0.928]
                        [-0.213 -0.715+0.928]
sin(hueRotate value) *  [+0.143 +0.140-0.283]
                        [-0.787 +0.715+0.072]

由于弧度是Excel三角公式的预期输入，因此您可以进行弧度转换（340deg约为5.9弧度 - 或者仅小于2 * pi），然后在Excel中构建结果矩阵。你可以手工繁殖矩阵，但坦率地说，我没有很大的愿望来重温线性代数类。所以你谷歌“矩阵乘法在线”并将两个矩阵弹出到结果第1页的任何矩阵乘法工具。你去吧合并矩阵。

简单： - ）

将两个SVG feColorMatrix滤镜效果合并为一个矩阵？

1 个答案: