如何移除父元素div的SVG Filter对子元素button的影响？

问题原因 #

父元素#parchment设置filter: url(#wavy2)后，浏览器会把整个父元素（包括所有子元素）作为一个整体进行滤镜渲染，子元素单独加filter: none根本没用——因为滤镜是作用在父元素的最终渲染结果上，不是子元素自身的样式。

最优解决方案（不用改HTML结构） #

用伪元素承载滤镜效果，让父元素的背景、阴影应用滤镜，子元素完全不受影响：

1. 修改#parchment的CSS：

   #parchment {
     /* 保留原有的其他样式 */
     padding: 4em;
     box-shadow: 2px 3px 20px black, 0 0 125px #8f5922 inset;
     /* 删掉直接加在父元素上的filter */
     /* filter: url(#wavy2); */
     position: relative; /* 给伪元素提供定位基准 */
     /* 如果原元素有背景色/背景图，留在这里，伪元素会继承 */
   }
   

2. 添加伪元素样式，专门承载滤镜和背景效果：

   #parchment::before {
     content: "";
     position: absolute;
     inset: 0; /* 等同于top:0; right:0; bottom:0; left:0; */
     background: inherit; /* 继承父元素的背景 */
     box-shadow: inherit; /* 继承父元素的内外阴影 */
     filter: url(#wavy2); /* 只对伪元素应用波浪滤镜 */
     z-index: -1; /* 让伪元素在子元素下方，不遮挡按钮点击 */
   }
   

原理说明 #

伪元素会变成父元素的背景层，单独被滤镜处理，而按钮这类子元素在伪元素上方，完全不受滤镜干扰，同时父元素的视觉效果和原来一模一样。

备选方案（需调整HTML结构） #

如果允许改HTML，可以把按钮移到#parchment外面，用绝对定位放回原位置：

<div id="parchment" class="contain"></div>
<button style="background-image: url('path/to/image2.jpg'); position: absolute; top: 4em; left: 4em;" onclick="redirectTo('pagina2.html');">dfwfefesefse</button>
<button style="background-image: url('path/to/image3.jpg'); position: absolute; top: 4em; left: 12em;" onclick="redirectTo('pagina3.html');"></button>

<svg>
  <filter id="wavy2">
    <feTurbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="1" />
    <feDisplacementMap in="SourceGraphic" scale="20" />
  </filter>
</svg>

这种方法需要手动调按钮的定位坐标，适配性不如伪元素方案。

内容的提问来源于stack exchange，提问作者pro Jack ZeroTheCrazy