SVG剪裁路徑是指根據指定的路徑或形狀來剪裁SVG圖形。應用了剪裁路徑的SVG圖形，在剪裁路徑內部的圖形可以被顯示出來，在剪裁路徑之外的圖形會被隱藏。
剪裁路徑的例子
下面是一個簡單的SVG剪裁路徑的例子：
- <defs>
- <clipPath id="clipPath">
- <rect x="15" y="15" width="40" height="40" />
- </clipPath>
- </defs>
- <circle cx="25" cy="25" r="20"
- style="fill: #0000ff; clip-path: url(#clipPath); " />
這個例子定義了一個矩形的剪裁路徑(<clipPath>中<rect>的元素)。在后面的SVG圓形中，通過style屬性的clip-path指向了這個剪裁路徑。
下面的左邊圖像是返回結果。右邊的圖像也是返回結果，但是它將剪裁路徑一起顯示出來了。
注意觀察，只有在矩形剪裁路徑內部的圓形才會被顯示出來，之外的部分會被剪裁掉。
高級剪裁路徑
你可以使用任何圖形來作為剪裁路徑。可以是圓形、橢圓、多邊形或自定義路徑。
在下面的例子中使用一條自定義路徑來作為剪裁路徑。這條剪裁路徑會被應用到一個<rect>元素上。
- <defs>
- <clipPath id="clipPath3">
- <path d="M10,10 q60,60 100,0 q50,50 50,50 l40,0 l-40,40 l-100,-20"/>
- </clipPath>
- </defs>
- <rect x="5" y="5" width="190" height="90"
- style="stroke: none; fill:#00ff00; clip-path: url(#clipPath3);"/>
在下面的右邊的圖像是返回結果，左邊的圖像是沒有使用剪裁路徑的矩形。
在組(GROUPS)中應用剪裁路徑
我們可以對一組SVG圖形使用剪裁路徑。實現的方法是將所有的圖形放到一個<g>元素中，然后設置<g>元素的clip-pathCSS屬性。下面是一個例子：
- <defs>
- <clipPath id="clipPath4">
- <rect x="10" y="20" width="100" height="20" />
- </clipPath>
- </defs>
- <g style="clip-path: url(#clipPath4);">
- <rect x="5" y="5" width="190" height="90"
- style="stroke: none; fill:#00ff00;"/>
- <circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;" />
- </g>
在下面左邊的圖像是沒有使用剪裁路徑的圖像。右邊的圖像是上面代碼的返回結果。
文字剪裁路徑
我們還可以使用文字來作為剪裁路徑。使用SVG<text> 來作為剪裁路徑的一個好處是你可以自定義字體。下面是一個簡單的文字剪裁路徑的例子：
- <defs>
- <clipPath id="clipPath5">
- <text x="10" y="20" style="font-size: 20px; ">This is a text</text>
- </clipPath>
- </defs>
- <g style="clip-path: url(#clipPath5);">
- <rect x="5" y="5" width="190" height="90"
- style="stroke: none; fill:#00ff00;"/>
- <circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;" />
下面左邊的圖像沒有使用剪裁路徑。右邊的圖像使用了文字剪裁路徑。
本文版權屬于jQuery之家，轉載請注明出處：http://www.htmleaf.com/ziliaoku/ ... g/201507032160.html
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。