第五天：如何在 SVG 中使用 clip-path

这个装饰物与我们第一天绘制的相同，只是它有一个定义为折线的图案。默认情况下，折线与圆形的边缘不匹配。如果不剪裁的话，这个东西看起来像这样：

我们在这里使用clip-path剪辑路径来确保图案完美贴合装饰品。clip-path在定义部分中定义。 defs 部分是我们图像的隐藏部分。这里的东西不会显示在屏幕上，但我们可以参考它们并在以后使用它们。

这里我们定义一个带有ID的clipPath。该剪辑路径的内容是一个与我们的装饰品大小相匹配的圆圈。然后我们通过设置它的clip-path属性来使用它来裁剪多段线。

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <defs>
    <clipPath id="ball">
      <circle cx="0" cy="20" r="70" />
    </clipPath>
  </defs>

  <circle cx="0" cy="20" r="70" fill="#D1495B" />

  <polyline
    clip-path="url(#ball)"
    points="-120 40 -80 0 -40 40 0 0 40 40 80 0 120 40"
    fill="none"
    stroke="#9C2D2A"
    stroke-width="20"
  />

  <circle
    cx="0"
    cy="-75"
    r="12"
    fill="none"
    stroke="#F79257"
    stroke-width="2"
  />
  <rect x="-17.5" y="-65" width="35" height="20" fill="#F79257" />
</svg>
分享：