今天做新的布局樣式,其中有個圖片樣式是這樣的。如下:
很明顯,可以發現圖片多了一個三角形且三角形屬于圖片的一部分。一開始我的做法是在圖片的左側覆蓋三個div,分別為兩個長方形和一個透明的三角形。后來,發現這種做法比較難調好,而且當這種樣式下的背景變了顏色后還得去更新這三個div的背景色,維護及更新麻煩。
于是乎,記得之前有看到某篇博客是講css3是可以支持這種多種形狀裁剪圖片的。找了下資料,發現css3的clip-path可以實現這種多邊形的圖片裁剪。但是它的兼容性不是很好,如下圖:
由于這個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="http://這里放圖片鏈接" 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”一定要大寫,不然裁剪會失效。