SVGClipPathElement: clipPathUnits 屬性

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

SVGClipPathElement 介面中只讀的 clipPathUnits 屬性反映了 <clipPath> 元素的 clipPathUnits 屬性，該屬性定義了用於元素內容的座標系統。

注意： 儘管此屬性是隻讀的，但它僅僅是兩個可修改值 baseVal 和 animVal 的容器。

值

一個 SVGAnimatedEnumeration，表示座標系。可能的值在 SVGUnitTypes 介面中定義。

0 (SVG_UNIT_TYPE_UNKNOWN): 該型別不是預定義的型別之一。
1 (SVG_UNIT_TYPE_USERSPACEONUSE): 對應於 clipPathUnits 屬性的 userSpaceOnUse 值，這意味著元素內的所有座標都引用剪下路徑建立時定義的當前使用者座標系統。這是預設值。
2 (SVG_UNIT_TYPE_OBJECTBOUNDINGBOX): 對應於該屬性的 objectBoundingBox 值，這意味著元素內的所有座標都相對於應用剪下路徑的元素的邊界框。它意味著座標系統的原點是物件邊界框的左上角，並且物件邊界框的寬度和高度被視為長度為 1 個單位值。

示例

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

html

<div>
  <svg viewBox="0 0 100 100" width="200" height="200">
    <clipPath id="clip1" clipPathUnits="userSpaceOnUse">
      <circle cx="50" cy="50" r="35" />
    </clipPath>

    <clipPath id="clip2" 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(#clip1)" href="#r1" fill="red" />
    <use clip-path="url(#clip1)" href="#r2" fill="blue" />
    <use clip-path="url(#clip1)" href="#r3" fill="yellow" />

    <!-- The last rect is clipped with objectBoundingBox units -->
    <use clip-path="url(#clip2)" href="#r4" fill="green" />
  </svg>
</div>
<pre id="log"></pre>

const clipPath1 = document.getElementById("clip1");
const clipPath2 = document.getElementById("clip2");

const log = document.getElementById("log");

log.textContent = `The clipPath used three times has a 'clipPathUnits' value of ${clipPath1.clipPathUnits.baseVal}
The clipPath used three times has a 'clipPathUnits' value of ${clipPath2.clipPathUnits.baseVal}`;

規範

規範
CSS 蒙版模組 Level 1 # dom-svgclippathelement-clippathunits

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN contributors 於 2024年7月26日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題