编辑这个页面须要登录或更高权限！

SVG <clippath>剪切路径

SVG剪切路径（也称为SVG剪切）用于根据特定路径剪切SVG形状。路径内部的形状部分可见，外部的部分不可见。

剪辑路径示例

这是一个简单的剪辑路径示例：

<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>
测试看看‹/›

这个实例定义了一个形状类似于矩形(<clipPath>元素中的形状)的剪辑路径。示例末尾定义的圆通过CSS属性 clip-path 引用了<clipPath> id属性。

左下方是生成的图像。右边是同一图像，但也绘制了剪切路径。

请注意，在剪切路径内只有圆的部分是可见的。其余部分将被剪切。

高级剪切路径

您可以使用矩形以外的其他形状作为剪切路径。 您可以使用圆形，椭圆形，多边形或自定义路径。 任何SVG形状都可以用作剪切路径。

这是将<path>元素用作剪切路径的示例，因为这些是您可以使用的最高级的剪切路径类型。 剪辑路径将应用于<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>
测试看看‹/›

这是生成的图像-在右侧。左侧显示没有剪切路径的图像。

在组上剪裁路径

可以在一组SVG形状上使用剪切路径，而不是分别在每个形状上使用。 只需将形状放在<g>元素内，然后在<g>元素上设置CSS属性clip-path即可。 这是一个实例：

<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>
测试看看‹/›

下面是没有剪切路径的图像，然后是应用剪切路径的图像：

文本作为剪切路径

也可以将文本用作剪切路径。这是一个实例：

<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>
测试看看‹/›

这是带有和不带有剪切路径的结果图像：

This is a text

正如您看到的，现在只显示文本内部形状的一部分。

SVG <filter> 滤镜SVG 参考手册