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

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，就在模糊它之前。（规范过去对此有些不清楚，但反复试验表明，大于 1 的值type="saturate"会使图像饱和，而小于 1 的值会使图像去饱和。）

问题是：我在大量路径上进行迭代，而双矩阵运算使我的机器慢下来。它经常崩溃。

某些矩阵数学大师能否帮我算出数字，以便将上面的两个 feColorMatrix 过滤器组合成一个更高效feColorMatrix的 type="matrix" 过滤器基元？我明白了规范的要点，但我在数学方面不知所措。

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

更新：

好的一步一步来。根据svg 过滤器规范，饱和的矩阵等价物是：

| 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表格，为你乘以这个。

然后您查看色相旋转的规范，您会发现色相旋转的等价矩阵是：

| 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 中构建结果矩阵。您可以手动乘以矩阵，但坦率地说，我并没有很大的愿望重温线性代数课。因此，您在 Google 上搜索“在线矩阵乘法”并将两个矩阵放入结果第 1 页上的任何矩阵乘法工具中。你去吧。合并矩阵。

简单 ：-）