clipPathUnits

Thuộc tính clipPathUnits chỉ định hệ tọa độ nào sẽ được dùng cho nội dung của phần tử <clipPath>.

Bạn có thể dùng thuộc tính này với phần tử SVG sau:

Ví dụ

html
<svg viewBox="0 0 100 100">
  <clipPath id="myClip1" clipPathUnits="userSpaceOnUse">
    <circle cx="50" cy="50" r="35" />
  </clipPath>

  <clipPath id="myClip2" clipPathUnits="objectBoundingBox">
    <circle cx=".5" cy=".5" r=".35" />
  </clipPath>

  <!-- Some reference rect to materialized to clip path -->
  <rect id="r1" x="0" y="0" width="45" height="45" />
  <rect id="r2" x="0" y="55" width="45" height="45" />
  <rect id="r3" x="55" y="55" width="45" height="45" />
  <rect id="r4" x="55" y="0" width="45" height="45" />

  <!-- The first 3 rect are clipped with userSpaceOnUse units -->
  <use clip-path="url(#myClip1)" href="#r1" fill="red" />
  <use clip-path="url(#myClip1)" href="#r2" fill="red" />
  <use clip-path="url(#myClip1)" href="#r3" fill="red" />

  <!-- The last rect is clipped with objectBoundingBox units -->
  <use clip-path="url(#myClip2)" href="#r4" fill="red" />
</svg>

clipPath

Đối với <clipPath>, clipPathUnits xác định hệ tọa độ được dùng cho nội dung của phần tử.

Giá trị userSpaceOnUse | objectBoundingBox
Giá trị mặc định userSpaceOnUse
Có thể animate
userSpaceOnUse

Giá trị này cho biết rằng mọi tọa độ bên trong phần tử <clipPath> đều tham chiếu đến hệ tọa độ người dùng như được định nghĩa khi đường cắt được tạo.

objectBoundingBox

Giá trị này cho biết rằng mọi tọa độ bên trong phần tử <clipPath> đều tương đối với hộp bao của phần tử mà đường cắt được áp dụng lên. Điều đó có nghĩa là gốc của hệ tọa độ là góc trên bên trái của hộp bao đối tượng và chiều rộng và chiều cao của hộp bao đối tượng được xem như có độ dài bằng 1 đơn vị.

Thông số kỹ thuật

Thông số kỹ thuật
CSS Masking Module Level 1
# element-attrdef-clippath-clippathunits