<clipPath>

Ngữ cảnh sử dụng

Thuộc tính

clipPathUnits

Xác định hệ tọa độ cho nội dung của phần tử <clipPath>. Kiểu giá trị: userSpaceOnUse | objectBoundingBox; Giá trị mặc định: userSpaceOnUse; Có thể hoạt ảnh: có

Giao diện DOM

Phần tử này triển khai giao diện SVGClipPathElement.

Ví dụ

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 100 100">
  <clipPath id="myClip">
    <!--
      Mọi thứ nằm ngoài hình tròn sẽ bị
      cắt và do đó không nhìn thấy.
    -->
    <circle cx="40" cy="35" r="35" />
  </clipPath>

  <!-- Trái tim đen ban đầu, để tham chiếu -->
  <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" />

  <!--
    Chỉ phần của trái tim đỏ
    nằm trong hình tròn cắt mới hiển thị.
  -->
  <use clip-path="url(#myClip)" href="#heart" fill="red" />
</svg>

/* Với một chút CSS cho các trình duyệt *
 * đã triển khai Geometry Property r. */

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

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

Một clipping path về mặt khái niệm tương đương với một viewport tùy chỉnh cho phần tử đang tham chiếu. Vì vậy, nó ảnh hưởng đến việc hiển thị của một phần tử, nhưng không ảnh hưởng đến hình học vốn có của phần tử đó. Hộp bao của một phần tử bị cắt (nghĩa là một phần tử tham chiếu đến phần tử <clipPath> thông qua thuộc tính clip-path, hoặc một phần tử con của phần tử tham chiếu) phải giữ nguyên như khi nó không bị cắt.

Theo mặc định, pointer-events không được phát trên các vùng bị cắt. Ví dụ, một hình tròn có bán kính 10 nhưng bị cắt bởi một hình tròn có bán kính 5 sẽ không nhận sự kiện "click" ở ngoài bán kính nhỏ hơn.

Đặc tả

Tương thích trình duyệt

Xem thêm

• <mask>
• Thuộc tính CSS clip-path
• Giới thiệu về CSS clipping
• Mô-đun CSS masking