扭曲的图案像轮廓面料

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