时间戳

首页 > 解决方案 > SVG嵌套过滤器使白色透明

svg - SVG嵌套过滤器使白色透明

问题描述

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

而且我在获取静态纹理并将其应用于饱和矩阵的输出方面已经取得了相当大的进展，有关更多上下文，请参见此处最右侧的第 5 条

`<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先过滤噪声然后合并时，我不得不使用不同的运算符，并且产生的噪声没有继承饱和过滤器的颜色。

标签： svgmatrix-multiplicationsvg-filters

解决方案

我认为您正在寻找乘法而不是加法-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>

推荐阅读