Question

我想一次性对一堆svg元素应用“曲线”，但不要认为这样做是可能的。只是想知道是否有人知道这样做的方法，或者是否存在允许循环变换的第三方包。

Answer 1

在某种程度上，您可以使用feDisplacementMap过滤器来“弯曲”您的基元。但它的使用非常有限; - ）

<svg shape-rendering="optimizeSpeed" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>


    <filter id="test" filterUnits="objectBoundingBox" x="-0.5" y="-0.5" width="2" height="2">
      <feImage xlink:href="#MyImage1" x="0" y="0" />
      <feGaussianBlur stdDeviation="8" result="out" />
      <feDisplacementMap in="SourceGraphic" in2="out" scale="20" xChannelSelector="G" yChannelSelector="G">
      </feDisplacementMap>
    </filter>

    <linearGradient id="grad" x1="50%" y1="50%" x2="100%" y2="25%" spreadMethod="reflect">
      <stop offset="0%" stop-color="#000000" />
      <stop offset="50%" stop-color="#00ff00" />
      <stop offset="100%" stop-color="#000000" />

      <animate attributeName="x1" from="0%" to="125%" begin="0s" dur="1.5s" repeatCount="indefinite" />
      <animate attributeName="x2" from="50%" to="175%" begin="0s" dur="1.5s" repeatCount="indefinite" />
    </linearGradient>
    <g id="MyImage1">
      <rect x="0" y="0" fill="url(#grad)" width="200" height="200" />
    </g>
  </defs>






  <g filter="url(#test)">
    <rect x="30" y="10" width="150" height="26.666" />
    <rect x="30" y="36.666" width="150" height="26.666" fill="red" />
    <rect x="30" y="63.3333" width="150" height="26.666" fill="yellow" />
  </g>
</svg>

我已经使用额外的feGaussionBlur更新了片段，以使弯曲更加平滑。

是否存在SVG“弯曲”变换

1 个答案: