SVG滤波器从直线产生波

我尝试用SVG回复图片中的效果。除了我手动绘制路径以外,您对我如何获得它有任何提示。

基本上,我正在考虑绘制或创建垂直直线的图案,然后对其施加效果。结果不必等于所提供的结果的100%,而是类似的。

SVG滤波器从直线产生波

weiche 回答:SVG滤波器从直线产生波

您最好不用绘制线条就能做到的是使用feDisplacementMap过滤器使它们变形-但结果甚至与您希望的结果也不尽相同,因为过滤器可在位图中使用。

<svg width="800px" height="600px" color-interpolation-filters="sRGB">

<defs>
<pattern id="diagonal" patternUnits="userSpaceOnUse" width="10" height="10">
  <path d="M0 0 l 10 10" 
        stroke="black" stroke-width="1"/>
</pattern>
  
  <filter id="distort">
    <feTurbulence baseFrequency = "0.015" type="fractalNoise" />
    <feDisplacementMap in='SourceGraphic' xChannelSelector="R" yChannelSelector="G" scale="60"/>
    <feGaussianBlur stdDeviation="1"/>
    <feComponentTransfer>
      <feFuncA  type="table" tableValues="0 .1 .5 1 1 1 1 1 1 1  1 1 1"/>
                          <feComponentTransfer>
  </filter>
</defs>

  <g filter="url(#distort)">
<rect x="10" y="10" width="300" height="300" fill="url(#diagonal)"/>
  </g>
</svg>

本文链接:https://www.f2er.com/3093558.html

大家都在问