使用JavaScript+CSS3+SVG clipPath實現自適應被裁剪圖片對象實例
CSS3中引入的clip-path(裁剪路徑)屬性是一個很強大的特性。clip-path的含義如下圖所示,好比剪紙一樣,你用剪刀沿著某條路徑把目標對象(圖像或元素)裁剪成我們想要的形狀。
clip-path支持多種方式,如基本的圖形(多邊形polygon(), 圓形circle(), inset() (用來定義內部矩形), 和橢圓 ellipse()),也支持直接引用SVG中的clipPath元素。先看二個效果圖
通常簡單的裁剪,我們直接使用基本圖形,或者使用在線工具輔助生成,我們推薦使用:
http://www.ikinsoft.com/clippath/clippath.html
來生成一些簡單的裁剪路徑,代碼如下:
/* 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則把座標空間的原點調整到被裁剪對象的左上角,座標空間的長寬設定為該元素的長寬。
生成polygons圖形clipPath數據的JavaScript代碼,如下:
$.each(shape_array.polygon, function (i, shape) {
paths = '';
$.each(shape.coords, function (i, coord) {
type = "polygon";
var x = coord[0] + "%";
var y = coord[1] + "%";
var path = 'clip-path: polygon()';
var coord = '';
if (i == shape.coords.length - 1) {
// last coordinate to add, omits a comma at the end
paths += x + ' ' + y;
var clip_path = 'polygon(' + paths + ')';
appendFigure(clip_path, shape);
} else {
// loops through each coordinate and adds it to a list to add
paths += x + ' ' + y + ', ';
}
});
});