是否存在SVG'彎曲'轉換

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使彎曲更加流暢。