SVG剪切路徑（也稱為SVG剪切）用于根據(jù)特定路徑剪切SVG形狀。路徑內(nèi)部的形狀部分可見，外部的部分不可見。
這是一個簡單的剪輯路徑示例：
<svg width="200" height="100" style="border: 1px solid #cccccc;"> <defs> <clippath id="clipPath"> <rect x="15" y="15" width="40" height="40"></rect> </clippath> </defs> <circle cx="25" cy="25" r="20" style="fill: #0000ff; clip-path: url(#clipPath); "></circle> </svg> <svg width="200" height="100" style="border: 1px solid #cccccc;"> <defs> <clippath id="clipPath2"> <rect x="15" y="15" width="40" height="40"></rect> </clippath> </defs> <circle cx="25" cy="25" r="20" style="fill: #0000ff; clip-path: url(#clipPath2); "></circle> <rect x="15" y="15" width="40" height="40" style="stroke: #000000; fill:none;"></rect> </svg>測試看看?/?
這個實(shí)例定義了一個形狀類似于矩形(<clipPath>元素中的形狀)的剪輯路徑。示例末尾定義的圓通過CSS屬性 clip-path 引用了<clipPath> id屬性。
左下方是生成的圖像。右邊是同一圖像，但也繪制了剪切路徑。
請注意，在剪切路徑內(nèi)只有圓的部分是可見的。其余部分將被剪切。
您可以使用矩形以外的其他形狀作為剪切路徑。 您可以使用圓形，橢圓形，多邊形或自定義路徑。 任何SVG形狀都可以用作剪切路徑。
這是將<path>元素用作剪切路徑的示例，因?yàn)檫@些是您可以使用的最高級的剪切路徑類型。 剪輯路徑將應(yīng)用于<rect>元素。
<svg width="200" height="100" style="border: 1px solid #cccccc;"> <rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00; "></rect> </svg> <svg width="200" height="100" style="border: 1px solid #cccccc;"> <defs> <clippath id="clipPath3"> <path d="M10,10 q60,60 100,0 q50,50 50,50 l40,0 l-40,40 l-100,-20"></path> </clippath> </defs> <rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00; clip-path: url(#clipPath3);"></rect> </svg>測試看看?/?
這是生成的圖像-在右側(cè)。左側(cè)顯示沒有剪切路徑的圖像。
可以在一組SVG形狀上使用剪切路徑，而不是分別在每個形狀上使用。 只需將形狀放在<g>元素內(nèi)，然后在<g>元素上設(shè)置CSS屬性clip-path即可。 這是一個實(shí)例：
<svg width="200" height="100" style="border: 1px solid #cccccc;"> <rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00; "></rect> <circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle> </svg> <svg width="200" height="100" style="border: 1px solid #cccccc;"> <defs> <clippath id="clipPath4"> <rect x="10" y="20" width="100" height="20"></rect> </clippath> </defs> <g style="clip-path: url(#clipPath4);"> <rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00;"></rect> <circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle> </g> </svg>測試看看?/?
下面是沒有剪切路徑的圖像，然后是應(yīng)用剪切路徑的圖像：
也可以將文本用作剪切路徑。這是一個實(shí)例：
<svg width="200" height="100" style="border: 1px solid #cccccc;"> <rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00; "></rect> <circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle> </svg> <svg width="200" height="100" style="border: 1px solid #cccccc;"> <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;"></rect> <circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle> </g> </svg>測試看看?/?
這是帶有和不帶有剪切路徑的結(jié)果圖像：
正如您看到的，現(xiàn)在只顯示文本內(nèi)部形狀的一部分。