svg circle标签可以填充图像吗

Question

想画一些圆形头像上去，图片是正方形的，circle可以进行圆角切割吗？

Answer 1

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
    <defs>
        <pattern id="avatar" width="100%" height="100%" patternContentUnits="objectBoundingBox">
            <image width="1" height="1" xlink:href="http://userimg.yingyonghui.com/head/24/1458708838143/5426424.png-thumb"/>
        </pattern>
        <style>
            circle, rect {
                stroke: #ff9900;
                stroke-width: 5px;
            }
        </style>
    </defs>
    <g>
        <circle cx="100" cy="100" r="50" fill="url(#avatar)"/>
        <rect x="200" y="50" rx="20" ry="20" width="100" height="100" fill="url(#avatar)"/>
    </g>
</svg>