漸變變換

gradientTransform 屬性包含一個可選的附加變換的定義，該變換從漸變座標系對映到目標座標系（即 `userSpaceOnUse` 或 `objectBoundingBox`）。這允許進行諸如傾斜漸變之類的操作。這個附加變換矩陣會後乘（即插入到任何先前定義的變換的右側）到任何先前定義的變換，包括從物件邊界框單位到使用者空間轉換所需的隱式變換。

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

示例

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

html

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <radialGradient
    id="gradient1"
    gradientUnits="userSpaceOnUse"
    cx="100"
    cy="100"
    r="100"
    fx="100"
    fy="100">
    <stop offset="0%" stop-color="darkblue" />
    <stop offset="50%" stop-color="skyblue" />
    <stop offset="100%" stop-color="darkblue" />
  </radialGradient>
  <radialGradient
    id="gradient2"
    gradientUnits="userSpaceOnUse"
    cx="100"
    cy="100"
    r="100"
    fx="100"
    fy="100"
    gradientTransform="skewX(20) translate(-35, 0)">
    <stop offset="0%" stop-color="darkblue" />
    <stop offset="50%" stop-color="skyblue" />
    <stop offset="100%" stop-color="darkblue" />
  </radialGradient>

  <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" />
  <rect x="220" y="0" width="200" height="200" fill="url(#gradient2)" />
</svg>

用法說明

預設值	預設變換
值	`<transform-list>`
可動畫的	是

<transform-list>: 一系列變換函式，指定了從漸變座標系到目標座標系的一些附加變換。

規範

規範
Scalable Vector Graphics (SVG) 2 # LinearGradientElementGradientTransformAttribute
Scalable Vector Graphics (SVG) 2 # RadialGradientElementGradientTransformAttribute

瀏覽器相容性

svg.elements.linearGradient.gradientTransform

svg.elements.radialGradient.gradientTransform

另見

<transform-function>

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年7月1日⁩，由 MDN 貢獻者貢獻。

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