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="http://www.mamicode.com/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>

方法二：<svg width="304" height="223">    <desc>SVG圆角效果</desc>    <defs>        <pattern id="raduisImage" patternUnits="userSpaceOnUse" width="304" height="223">            <image xlink:href="http://www.mamicode.com/a.jpg" x="0" y="0" width="304" height="223" />        </pattern>    </defs>    <circle cx="125" cy="100" r="100" fill="url(#raduisImage)"></circle></svg>

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