1

我正在使用 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" 过滤器原语的数字吗？我得到了规范的要点，但我在数学方面有点不知所措。

4

1 回答 1

5

根据我的经验，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 三角公式的预期输入，因此您需要对弧度进行度数转换（340 度约为 5.9 弧度 - 或仅小于 2* pi），然后在 Excel 中构建结果矩阵。您可以手动将矩阵相乘，但坦率地说，我没有重温线性代数课的强烈愿望。因此，您使用谷歌搜索“在线矩阵乘法”并将这两个矩阵弹出到结果第 1 页上的任何矩阵乘法工具中。你去吧。合并矩阵。

简单的 ：-）

于 2012-10-10T04:19:36.200 回答