SVGPatternElement: patternTransform 屬性

Baseline 已廣泛支援

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

SVGPatternElement 介面的只讀屬性 patternTransform 反映了給定 <pattern> 元素的 patternTransform 屬性。此屬性儲存應用於圖案本身的變換，允許進行 translate、rotate、scale 和 skew 等操作。

值

一個 SVGAnimatedTransformList 物件。

示例

在此示例中，圖案在 X 軸上旋轉 20 度，傾斜 30 度，並且在水平方向上縮放因子為 1，在垂直方向上縮放因子為 0.5。

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Apply a transform on the tile -->
  <pattern
    id="p1"
    width=".25"
    height=".25"
    patternTransform="rotate(20)
                      skewX(30)
                      scale(1 0.5)">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!-- Apply the transformed pattern tile -->
  <rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
</svg>

規範

規範
Scalable Vector Graphics (SVG) 2 # __svg__SVGPatternElement__patternTransform

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2024年12月30日，由 MDN 貢獻者編輯。

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