是否存在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使弯曲更加流畅。