裁剪图片利器svg(各种形状基本都支持)

今天做新的布局样式，其中有个图片样式是这样的。如下：

Paste_Image.png

很明显，可以发现图片多了一个三角形且三角形属于图片的一部分。一开始我的做法是在图片的左侧覆盖三个div，分别为两个长方形和一个透明的三角形。后来，发现这种做法比较难调好，而且当这种样式下的背景变了颜色后还得去更新这三个div的背景色，维护及更新麻烦。

于是乎，记得之前有看到某篇博客是讲css3是可以支持这种多种形状裁剪图片的。找了下资料，发现css3的clip-path可以实现这种多边形的图片裁剪。但是它的兼容性不是很好，如下图：

Paste_Image.png

由于这个css3属性其实就是从之前的svg（伸缩矢量图形）整合进来的，于是就试着用svg来实现这个样式，发现效果比之前的做法好很多。且它的浏览器兼容性兼容到ie9+(包括ie9)， 其他的Firefox，Chrome，Opera和Safari也都支持，在苹果，安卓各种机型测试都没发现问题。果断使用之。如下代码：

<svg xmlns="http://www.w3.org/2000/svg" width="145" height="91">
    <defs>
        <clipPath id="clippath"><polygon points="6 0,145 0,145 91,6 91,6 35,2 31,6 25"></polygon></clipPath>
    </defs>
    <image xmlns:link="http://www.w3.org/1999/xlink" link:href="//这里放图片链接" width="145" height="91" preserveAspectRatio="none" style="clip-path:url(#clippath);">
    </image>
</svg>

svg标签、polygon标签和image标签的宽高、points等属性都可以通过JavaScript去动态设置，因此可以先静态引入svg再去设置宽高属性，及精确定位要裁剪多边形的点。这里如果不知道这么定位这些点的话可以参考下面的链接：bennettfeely.com/clippy，每个点都有宽和高，根据图片的宽高及具体的百分比算出具体的点的“坐标”就可以了。

这里的preserveAspectRatio属性是保持原始比例的意思，我这里的需求不需要，所以设置为none(及拉伸的作用)。详情也可以从下面的链接了解：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

最后，注意一个svg内容标签大小写的小坑：

当在 HTML 里直接写静态的 SVG 内容时, 无论你使用的是 clipPath 标签还是 clippath 标签都可以；如果页面上已经有解析过 clipPath 元素后, 那么动态创建时无论你使用 clipPath标签 还是 clippath标签也是可以的；但是如果你是第一次动态创建这个clipPath标签元素时，clipPath里的“P”一定要大写，不然裁剪会失效。