SVG如何做圆形图片

SVG如何做圆形图片

2016年5月31日17:30:48

提到圆形图片,大家首先想到的一定是border-radius,但在SVG中这些方法很难起效,下面方法适合SVG中制作任意规则与不规则的图形。

原图:

SVG如何做圆形图片_第1张图片

效果:

SVG如何做圆形图片_第2张图片

方法一(SVG原生方法):

 


    SVG圆角效果
    
        
            
        
    
    
    
    
     

方法二(借助snap.svg):

 

 

方法二:

    SVG圆角效果
    
        
            
        
    
    

 

第二种方法生成的代码与第一种是非常类似的。只是换了种写法而已

SVG如何做圆形图片_第3张图片

 
 
 



来自为知笔记(Wiz)



转载于:https://www.cnblogs.com/dmcl/p/5856202.html

你可能感兴趣的:(SVG如何做圆形图片)