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>

方法二：
<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>

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