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>
第二种方法生成的代码与第一种是非常类似的。只是换了种写法而已
