gradientTransform

SVG 元素
1. A
2. B-C
3. D
  1. <defs>
  2. <desc>
4. E
  1. <ellipse>
5. F
6. G
7. H
  1. <hkern>
8. I
  1. <image>
9. J-L
  1. <line>
  2. <linearGradient>
10. M
11. N-P
12. Q-R
  1. <radialGradient>
  2. <rect>
13. S
  1. <script>
  2. <set>
  3. <stop>
  4. <style>
  5. <svg>
  6. <switch>
  7. <symbol>
14. T
15. U
  1. <use>
16. V-Z
  1. <view>
  2. <vkern>

gradientTransform attribute contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userSpaceOnUse or objectBoundingBox). This allows for things such as skewing the gradient. This additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space.

You can use this attribute with the following SVG elements:

范例

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

<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>

用法注意事项

默认值	Identity transform
值	`<transform-list>`
Animatable	Yes

<transform-list>

规范

规范	状态	注释
CSS Transforms Level 1 The definition of 'surfaceScale for <feSpecularLighting>' in that specification.	工作草案	定义 `<transformation-list>` 值。
Scalable Vector Graphics (SVG) 2 The definition of 'gradientTransformation for <linearGradient>' in that specification.	候选推荐	无变化
Scalable Vector Graphics (SVG) 2 The definition of 'gradientTransformation for <radialGradient>' in that specification.	候选推荐	无变化
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'gradientTransformation for <linearGradient>' in that specification.	推荐	Initial definition for `<linearGradient>`
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'gradientTransformation for <radialGradient>' in that specification.	推荐	Initial definition for `<radialGradient>`

浏览器兼容性

BCD tables only load in the browser

另请参阅

<transform-function>

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者