clipPathUnits

clipPathUnits 屬性指示為 <clipPath> 元素的內容使用哪個座標系。

您可以將此屬性與以下 SVG 元素一起使用

示例

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

對於 <clipPath>clipPathUnits 定義元素內容中使用的座標系。

userSpaceOnUse | objectBoundingBox
預設值 userSpaceOnUse
可動畫
userSpaceOnUse

此值表示 <clipPath> 元素內部的所有座標都引用在建立裁剪路徑時定義的使用者座標系。

objectBoundingBox

此值表示 <clipPath> 元素內部的所有座標都相對於應用裁剪路徑的元素的邊界框。這意味著座標系的原點是物件邊界框的左上角,物件邊界框的寬度和高度被認為具有 1 個單位值長度。

規範

規範
CSS 掩碼模組級別 1
# element-attrdef-clippath-clippathunits