如何实现SVG clipPath自适应被裁剪对象

CSS3中引入的clip-path（裁剪路径）属性是一个很强大的特性。

clip-path的含义如下图所示，好比剪纸一样，你用剪刀沿着某条路径把目标对象（图像或元素）裁剪成我们想要的形状。

clip-path支持多种方式，如基本的图形（多边形polygon(), 圆形circle(), inset() (用来定义内部矩形), 和椭圆 ellipse()），也支持直接引用SVG中的clipPath元素。通常简单的裁剪，我们直接使用基本图形，或者使用在线工具辅助生成，我们推荐使用：

http://techbrood.com/css-clip-path

来生成一些简单的裁剪路径，代码如下：

/* Using a CSS basic shape function */
.element {
    clip-path: polygon(...); /* or one of the other shape functions */
}

对于更为复杂的裁剪，使用SVG无疑是更好的选择，我们可以在AI或Inkscape中创作好矢量图，然后根据其路径（path）数据生成相应的clipPath元素，然后在CSS3中直接引用，代码如下：

/* Referencing an SVG clipPath */
.element {
    clip-path: url(#svgClipPathID);
}

但是在使用SVG clipPath元素时，经常会遇到单位不匹配的情况，因为通常通过工具生成的g元素，会应用一些变换（如位移和缩放）：

<g transform="translate(0.000000,126.000000) scale(0.100000,-0.100000)"><clipPath>your paths here</clipPath></g>

而在CSS3直接引用clipPath时，不会自动去处理这些变换，需要我们自己来处理，

把path数据转换成百分比，然后给clipPath添加clipPathUnits="objectBoundingBox"属性来自适应：

<svg width="0" height="0">
    <defs>
        <clipPath id="svgPath" clipPathUnits="objectBoundingBox">
            <!-- your paths here -->
        </clipPath>
    </defs>
</svg>

clipPathUnits 属性用来指定<clipPath>元素内容的坐标系，有2种取值：

clipPathUnits = "userSpaceOnUse | objectBoundingBox"

userSpaceOnUse表示当前网页所使用的屏幕坐标系，而objectBoundingBox则把坐标空间的原点调整到被裁剪对象的左上角，坐标空间的长宽设定为该元素的长宽。