<clipPath>

Элемент <clipPath> SVG задаёт обтравочный контур, используемый свойством clip-path.

Обтравочный контур ограничивает область, в которой может применяться заливка. Концептуально части рисунка, расположенные за пределами области, ограниченной обтравочным контуром, не отображаются.

Контекст использования

Атрибуты

clipPathUnits

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

Интерфейс DOM

Этот элемент реализует интерфейс SVGClipPathElement.

Пример

<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, не будет получать события «click» за пределами меньшего радиуса.

Спецификации

Совместимость с браузерами

Связанные материалы

• <mask>
• Свойство CSS clip-path
• Введение в обрезку в CSS
• Модуль маскирования CSS