SVG实现圆角图片实例页面

CSS代码：

.range-txt { color: #999; font-size: 12px; }
                

HTML代码：

<strong>这是原图</strong>
<p><img src="mm1.jpg" width="256" height="191"></p>
<strong>这是SVG实现</strong>
<p>水平圆角大小：<span class="range-txt"> 0 <input id="radiusH" type="range" min="0" max="128" value="128"> 128</span></p>
<p>垂直圆角大小：<span class="range-txt"> 0 <input id="radiusV" type="range" min="0" max="96" value="96"> 96</span></p>
<svg width="256" height="191">
    <desc>SVG圆角效果</desc>
    <defs>
        <pattern id="raduisImage" patternUnits="userSpaceOnUse" width="256" height="191">
            <image xlink:href="mm1.jpg" x="0" y="0" width="256" height="191" />
        </pattern>
    </defs>
    <rect x="0" y="0" width="256" height="191" rx="128" ry="95" fill="url(#raduisImage)"></rect>
    <!-- 圆形使用下面这个 -->
    <!-- <circle cx="128" cy="95.5" r="95.5" fill="url(#raduisImage)"></circle> -->
</svg>
                

JS代码：

var rect = document.getElementsByTagName("rect")[0];
if (rect && [].forEach) {
    ["H", "V"].forEach(function(type, index) {
        var input = document.getElementById("radius" + type);
        input && input.addEventListener("change", function() {
            var value = this.value * 1, val_min = this.getAttribute("min"), val_max = this.getAttribute("max");
            value = value || 0;
            if (val_min && val_max) {
                if (value < val_min) value = val_min;
                if (value > val_max) value = val_max;
                
                // IE9等不支持range类型的浏览器
                if (this.type != "range") this.value = value;
                // 设置水平圆角
                rect.setAttribute(index? "ry": "rx", value);
            }
        });
    });
}