gradientTransform

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="0"
    y="0"
    width="200"
    height="200"
    fill="url(#gradient2)"
    style="transform: translateX(220px);" />
</svg>

使用說明

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

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

規範

規範
CSS Transforms 模組級別 1 # typedef-transform-list
可縮放向量圖形 (SVG) 2 # LinearGradientElementGradientTransformAttribute
可縮放向量圖形 (SVG) 2 # RadialGradientElementGradientTransformAttribute

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱

<transform-function>