渐变变换
gradientTransform 属性包含一个可选的附加变换的定义，该变换从渐变坐标系映射到目标坐标系（即 `userSpaceOnUse` 或 `objectBoundingBox`）。这允许进行诸如倾斜渐变之类的操作。这个附加变换矩阵会后乘（即插入到任何先前定义的变换的右侧）到任何先前定义的变换，包括从对象边界框单位到用户空间转换所需的隐式变换。
你可以将此属性与以下 SVG 元素一起使用
示例
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
加载中…