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>元素里面的形状)。在示例末尾定义的圆圈通过clip-pathCSS属性引用了<clipPath>id属性。

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

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

进阶剪辑路径

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

这是一个使用<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);"/>

这是右边的结果图像。左侧显示没有剪辑路径的图像。

组上的剪切路径

可以在一组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>

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

文本作为剪切路径

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

<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;" />
</g>

这是在应用和未应用剪切路径的情况下生成的图像：

这是一段文字

如我们所见，现在只显示文本内部形状的一部分。