SVG嵌套过滤器使白色透明答案

【问题标题】：SVG nested filter make white transparentSVG嵌套过滤器使白色透明
【发布时间】：2019-11-06 10:24:33
【问题描述】：

我正在试验一组噪声/静态纹理。我的目标是创建一个看起来像这样的纹理：GOAL

我在获取静态纹理并将其应用于饱和矩阵的输出方面已经取得了很大进展，更多上下文请参见第 5 条，最右边的条带 here

`<filter  x="0%" y="0%" width="100%" height="100%" id="noiseMatrix3" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB">
    <feTurbulence type="fractalNoise" result="f1" stitchTiles="noStitch" baseFrequency="0.2" numOctaves="1" seed="2" />
    <feColorMatrix type="matrix" 
            values="-11 0 0 0 6
                    -11 0 0 0 6
                    -11 0 0 0 6
                    0 0 0 0 1" in="f1" result="f2" />
   <feColorMatrix type="saturate" in="SourceGraphic" values=".6" result="f4"/>
    <feComposite in="f2" in2="f4" result="f5"  operator="arithmetic"  k1="0" k2="1" k3="1" k4="0"/>
</filter>`

但是，代替白色纹理，我希望看到源图像（即照片中的粉红色渐变）。我怀疑它与将白色值转换为 alpha 有关。但是，当我尝试先使用 luminanceToAlpha 过滤噪声然后合并时，我不得不使用不同的运算符，并且产生的噪声没有从饱和过滤器继承颜色。

【问题讨论】：

标签： svg matrix-multiplication svg-filters

【解决方案1】：

我认为您正在寻找乘法而不是加法 - k 的这种组合更适合您的 feComposite/算术

 <filter  x="0%" y="0%" width="100%" height="100%" id="noiseMatrix3" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB">
  <feTurbulence type="fractalNoise" result="f1" stitchTiles="noStitch" baseFrequency="0.2" numOctaves="1" seed="2" />
  <feColorMatrix type="matrix" 
        values="-11 0 0 0 6
                                    -11 0 0 0 6     
                                    -11 0 0 0 6      
                                    0 0 0 0 1" in="f1" result="f2" />
  <feColorMatrix type="saturate" in="SourceGraphic" values=".6" result="f4"/>
  <feComposite in="f2" in2="f4" result="f5"  operator="arithmetic"  k1="1" k2="0" k3=".6" k4="0" />   

 </filter>

【讨论】：