结合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

Michael Mullany的

These slides为我提供了一些很好的指示，就像the MDN web docs for SVG filters一样。

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

我为k3输入了一个值1，理解这意味着我要为最终图像中的所有像素添加固定的全蓝色偏移，将它们乘以{{1的输出的0.5倍过滤元素的alpha通道（虽然我可以任意地将该值0.5放入任何“R-> A”，“G-> A”，“B-> A”或“A-＆gt; ;“地点”。

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

feComposite

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