svg - 像轮廓织物一样扭曲图案

Question

谁能想到 SVG 中的一种方法来扭曲图案，就好像它是一块有褶皱和皱纹的织物？

例如，如果我有一条条纹沙滩巾铺在不平坦的海滩上，那么条纹将不会直线延伸，而是会波浪形折叠并在穿过海滩轮廓时通常会变形。

我知道可以在 SVG 中应用各种转换，但是有没有可以应用这种失真的转换？

Answer 1

使用 SVG 过滤器：feDisplacementMap + feTurbulence。例子：

  <feTurbulence type="turbulence" baseFrequency=".02" numOctaves="4"  result="turb"/>
  <feDisplacementMap in="SourceGraphic" in2="turb" scale="0" result="displace" xChannelSelector="B"/>

更长的例子：http ://codepen.io/mullany/pen/nLtla