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>