html - Masking SVG-filter，不是简单地将mask和filter结合起来

Question

我正在尝试将 fractalNoise 过滤器应用于 HTML 元素。但是，我不希望整个元素受到影响，而是希望过滤器从下到上逐渐增加。 为了实现这一目标，我尝试首先创建噪声滤波器，然后将其与掩码滤波器配对。

我遇到了两个问题:第一个但可能较小的问题是过滤后的元素出现在未过滤的元素之上。

第二个问题是我的想法似乎根本行不通: mask 滤镜只会使元素淡出。 我想原因是我没有将掩模应用到噪声滤波器，而是简单地将噪声和掩模滤波器应用到元素。不幸的是，这是我在网上找到的唯一教程，因为此过程与蒙版模糊滤镜配合得很好。

这就是我的过滤器的样子:

<filter id="noiselayer" width="200%" height="200%">

    <feTurbulence type="fractalNoise" baseFrequency="0.0001 0.2" numOctaves="1" result="warp"></feTurbulence>
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" result="noise"/>

    <feImage id="feimage" xlink:href="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE5MjAgMTA4MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6dXJsKCNTVkdJRF8xXyk7fQ0KPC9zdHlsZT4NCjxnIGlkPSJWZXJsYXVmIj4NCgk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9Ijk2MCIgeTE9IjEwODAiIHgyPSI5NjAiIHkyPSItMi43Mjg0ODRlLTEyIj4NCgkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0ZGRkZGRjtzdG9wLW9wYWNpdHk6MCIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojMDAwMDAwIi8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgk8cmVjdCB4PSIwIiB5PSIwIiBjbGFzcz0ic3QwIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSIxMDgwIi8+DQo8L2c+DQo8L3N2Zz4=" width= "100%" result="mask" />

    <feComposite in2="mask" in="noise"  operator="in" result="comp" />

    <feMerge result="merge">
        <feMergeNode in="SourceGraphic" />
        <feMergeNode in="comp" />
    </feMerge> 

这里有一个悲伤的 JSFiddle 来说明这个问题: https://jsfiddle.net/ew09thnx/11/

我很感激任何解决问题的提示!

Answer 1

这里要理解的关键是 feComposite 运算符 =“in” 使用不透明度而不是亮度来执行其 mask 功能，因此您需要将该渐变从黑/白渐变转换为具有可变不透明度渐变的全黑。您可以使用 feColorMatrix/luminanceToAlpha 来完成此操作。

如果您只想创建一些噪音并将其分层在另一个元素上，那么这是一个更好的方法。 (将您的 baseFrequency 值更改为更引人注目的值)。

(我以前从未见过在 head 元素中定义的过滤器 - 我希望它可以跨浏览器工作 - 我不明白为什么你将它应用于 HTML 元素而不是 body 元素。)

<filter id="noiselayer" width="200%" height="200%">

      <feTurbulence result="fNoise" type="fractalNoise" numOctaves="6" baseFrequency="1.98"/> 
      <feColorMatrix in="fNoise" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 7 -3" result="noise"/>

      <feImage id="feimage" xlink:href="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE5MjAgMTA4MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6dXJsKCNTVkdJRF8xXyk7fQ0KPC9zdHlsZT4NCjxnIGlkPSJWZXJsYXVmIj4NCgk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9Ijk2MCIgeTE9IjEwODAiIHgyPSI5NjAiIHkyPSItMi43Mjg0ODRlLTEyIj4NCgkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0ZGRkZGRiIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojMDAwMDAwIi8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgk8cmVjdCB4PSIwIiB5PSIwIiBjbGFzcz0ic3QwIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSIxMDgwIi8+DQo8L2c+DQo8L3N2Zz4=" width= "100%"  />
      <feColorMatrix type="luminanceToAlpha" result="mask"/>

      <feComposite in2="mask" in="noise"  operator="in" result="comp" />

      <feMerge result="merge">
        <feMergeNode in="SourceGraphic" />
        <feMergeNode in="comp" />
      </feMerge> 

    </filter>