SVG如何做圆形图片
SVG如何做圆形图片
2016年5月31日17:30:48
提到圆形图片,大家首先想到的一定是border-radius,但在SVG中这些方法很难起效,下面方法适合SVG中制作任意规则与不规则的图形。
原图:
效果:
方法一(SVG原生方法):
<svg width="304" height="223"> <desc>SVG圆角效果</desc> <defs> <pattern id="raduisImage" patternUnits="userSpaceOnUse" width="304" height="223"> <image xlink:href="a.jpg" x="0" y="0" width="304" height="223" /> </pattern> </defs> <!-- 方形使用下面这个 --> <!--<rect x="0" y="0" width="304" height="223" rx="128" ry="95" fill="url(#raduisImage)"></rect>--> <!-- 圆形使用下面这个 --> <circle cx="128" cy="100" r="100" fill="url(#raduisImage)"></circle> </svg>方法二(借助snap.svg):
方法二: <svg width="304" height="223"> <desc>SVG圆角效果</desc> <defs> <pattern id="raduisImage" patternUnits="userSpaceOnUse" width="304" height="223"> <image xlink:href="a.jpg" x="0" y="0" width="304" height="223" /> </pattern> </defs> <circle cx="125" cy="100" r="100" fill="url(#raduisImage)"></circle> </svg>
第二种方法生成的代码与第一种是非常类似的。只是换了种写法而已
![赞赏:https://images2018.cnblogs.com/blog/1023587/201802/1023587-20180226133036435-1544066188.png](https://images2018.cnblogs.com/blog/1023587/201802/1023587-20180226133036435-1544066188.png)