结合 svg 过滤器（`feTurbulence`？`feColorMatrix`？其他？）以获得单色纹理效果

Question

如何结合 svg 过滤器来获得两者：

• “斑驳”的纹理和
• 单一色谱（例如不同级别的蓝白）？

我可以使用feTurbulence 过滤器来获得“斑点”效果。我也知道feColorMatrix 过滤器可以使图像去饱和，即“丢失”颜色并将图像转换为灰度。但是，我无法在前者之后将它们结合起来做后者。当我尝试过时，feTurbulence 滤镜的“彩虹”着色效果似乎仍然存在。我的（中间）想要的结果是灰度图像。除此之外，我想将该灰度图像转换为单一颜色，例如将其从灰白光谱转换为蓝白光谱。也许这些需要在单独的步骤中进行，或者可以将它们组合在一个步骤中。

我在下面展示了将feTurbulence 过滤器（与feComposite 过滤器结合使用）应用于某些文本和svg 形状的代码。此代码在 Google Chrome 中适用于我，但我尚未在其他浏览器中检查它（我目前也不需要它）。如果您正在使用此过滤器不起作用的浏览器阅读此问题，此处提供了输出的屏幕截图：

我最终想将其转换为类似以下的内容（我使用图像处理软件而不是网络技术创建的）：

我真的不需要通用的跨浏览器解决方案；我只需要它在 Chrome 中工作。

.filtered{
  filter: url(#filter);
  font-size: 100px;
}
p {
  font-size: 100px;
}

<svg width="0" height="0">
  <defs>
    <filter id="filter">
      <feTurbulence type="fractalNoise" result="TURBULENCE" baseFrequency="0.1" numOctaves="5" seed="2" />
      <feComposite operator="in" in="TURBULENCE" in2="SourceAlpha" />
    </filter>
  </defs>
</svg>
<div  class="filtered">
  Some Text<br/>
  <svg>
    <rect x="10" y="10" width="300" height="100" fill="black" />
  </svg>
</div>

Answer 1

These slidesThese slidesthe MDN web docs for SVG filtersthe MDN web docs for SVG filtersthe MDN web docs for SVG filters 给了我一些很好的建议来解决这个问题。

我发现了以下解决方案（尽管其他解决方案也是可能的）。我使用feComposite 过滤器元素的result 属性值作为feColorMatrix 过滤器元素的in 属性值，它使用“矩阵”的type。要理解 values 属性，下面这张 Michael Mullany 演讲中的幻灯片帮助了我：

我为 k3 输入了一个值 1，理解这意味着我正在为最终图像中的所有像素添加一个固定的全蓝色偏移，将它们乘以 feComposite 输出的 0.5 倍过滤器元素的 alpha 通道（虽然我也可以任意将 0.5 的值放入任何“R->A”、“G->A”、“B->A”或“A->A”位置）。

如果您从无法正确显示代码 sn-p 结果的浏览器中查看此答案，我在使用 Google Chrome 时从以下代码中获得的输出如下：

.filtered{
  filter: url(#filter);
}
p {
  margin: 0;
  font-size: 100px;
}

<svg width="0" height="0">
  <defs>
    <filter id="filter">
      <feTurbulence type="fractalNoise" result="myTurbulence" baseFrequency="0.1" numOctaves="5" seed="2" />
      <feComposite operator="in" in="myTurbulence" in2="SourceAlpha" result="myComposite"/>
      <feColorMatrix in="myComposite" type="matrix"
        values="0   0   0   0   0
                0   0   0   0   0
                0   0   0   0   1
                0   0   0   0.5 0" />
    </filter>
  </defs>
</svg>
<div  class="filtered">
  <p>Some Text</p>
  <svg>
    <rect x="10" y="10" width="300" height="100" />
  </svg>
</div>