<clipPath>

<svg viewBox="0 0 100 100">
  <clipPath id="myClip">
    <!--
      Everything outside the circle will be
      clipped and therefore invisible.
    -->
    <circle cx="40" cy="35" r="35" />
  </clipPath>

  <!-- The original black heart, for reference -->
  <path
    id="heart"
    d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />

  <!--
    Only the portion of the red heart
    inside the clip circle is visible.
  -->
  <use clip-path="url(#myClip)" href="#heart" fill="red" />
</svg>

/* With a touch of CSS for browsers who *
 * implemented the r Geometry Property. */

@keyframes openYourHeart {
  from {
    r: 0;
  }
  to {
    r: 60px;
  }
}

#myClip circle {
  animation: openYourHeart 15s infinite;
}

Область обрезки концептуально эквивалентна пользовательскому обзору для элемента-ссылки. Таким образом, она влияет на отображение элемента, но не на внутреннюю геометрию элемента. Область ограничиваемого элемента (т. е. элемента, который ссылается на элемент <clipPath> с помощью свойства clip-path, или дочернего элемента элемента-ссылки) должна оставаться такой же, как если бы он не был обрезан.

По умолчанию, pointer-events не генерируются для областей обрезки. Например, окружность с радиусом 10, которая обрезается до окружности с радиусом 5, не будет получать события «нажатия» вне меньшего радиуса.

clipPathUnits

Определяет систему координат для содержимого элемента <clipPath>. Тип значения: userSpaceOnUse|objectBoundingBox ; Значение по умолчанию: userSpaceOnUse; Анимируемо: да

• Другие элементы SVG для обрезки и маскирования: <mask>
• Некоторые свойства CSS: clip-path, pointer-events