svg - 混合 SVG 滤镜
问题描述
我觉得我快到了。我试图在片段中实现与 GIF 相同的结果(主要是对“太阳”的涟漪效应)。欢迎提供有关如何执行此操作或更清洁的替代方法的建议。
body {
background: grey
}
svg {
background-color: #fff
}
<svg width="200" height="200" viewBox="0 0 200 220" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="vapourwave">
<feTurbulence id="turb" type="fractalNoise" numOctaves="1" baseFrequency=".04,.2" seed="5" result="turb"/>
<feColorMatrix in="turb" type="hueRotate" values="0" result="turb">
<animate attributeName="values" from="0" to="360" dur="2s" repeatCount="indefinite"/>
</feColorMatrix>
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="turb" scale="20"/>
</filter>
<clipPath id="clip-1">
<rect x="0" y="140" width="300" height="200" />
</clipPath>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</linearGradient>
</defs>
<circle cx="100" cy="100" r="100" fill="url('#myGradient')"/>
<circle cx="100" cy="105" r="100" filter="url(#vapourwave)" clip-path="url(#clip-1)"/>
</svg>
<img src="https://s9.gifyu.com/images/ezgif.com-gif-maker36ade78f49932edd.gif" alt="">
解决方案
我看到你在用剪辑路径做什么,但我认为这更容易控制蒙版。在这里,我在一个矩形上制作了一个蒙版,形成了圆形。面罩也有一个面罩来分割需要过滤器的部分。我还添加了一些阴影。
body {
background: #000;
}
<svg width="200" height="220" viewBox="0 0 200 220" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="vapourwave">
<feTurbulence id="turb" type="fractalNoise" numOctaves="1" baseFrequency=".04,.2" seed="5" result="turb"/>
<feColorMatrix in="turb" type="hueRotate" values="0" result="turb">
<animate attributeName="values" from="0" to="360" dur="2s" repeatCount="indefinite"/>
</feColorMatrix>
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="turb" scale="40"/>
<feDropShadow dx="0" dy="0" stdDeviation="10"
flood-color="white" />
</filter>
<filter id="shadow">
<feDropShadow dx="0" dy="0" stdDeviation="10"
flood-color="white" />
</filter>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="red" />
<stop offset="30%" stop-color="red" />
<stop offset="70%" stop-color="orange" />
<stop offset="95%" stop-color="orange" />
</linearGradient>
<mask id="m2">
<rect y="120" width="200" height="80" fill="white" />
</mask>
<mask id="m3">
<circle cx="100" cy="100" r="90" fill="white" filter="url(#shadow)" />
<rect y="120" width="200" height="80" fill="black" />
<circle cx="100" cy="100" r="90" fill="white" mask="url(#m2)" filter="url(#vapourwave)"/>
</mask>
</defs>
<rect width="100%" height="100%" fill="url('#myGradient')" mask="url(#m3)" />
</svg>
<img src="https://s9.gifyu.com/images/ezgif.com-gif-maker36ade78f49932edd.gif" width="300" alt="">
推荐阅读
- ansible - status_code 的状态码范围
- mysql - 如何从mysql数据库中搜索特定关键字
- z3 - 使用 Z3 库复制反编译的 C 代码
- django - 使用 django 在一个打开的选项卡中注销时自动在所有选项卡中注销
- ios - 在 iOS 上将 SwiftUI 视图转换为 PDF
- node.js - 角度的木偶 - 打印pdf
- c# - 当文件由于 TFS 为只读时,在 Windows 上从 Visual Studio 2019 运行 Docker 会导致 /app/appsettings.json 出现 UnauthorizedAccessException
- javascript - 使用纯 JavaScript 应用 Google recaptcha V3
- javascript - 使用javascript的数组中第一个丢失的正整数?
- python - 图和数据不匹配