就业培训     下载中心     Wiki     联络
登录   注册

Log
  1. 首页
  2. SVG:可伸缩向量图形
  3. SVG Attribute reference
  4. gradientUnits

内容表

  • linearGradient
  • radialGradient
  • 规范

gradientUnits

  1. SVG 元素
    1. A
      1. <a>
      2. <altGlyph>
      3. <altGlyphDef>
      4. <altGlyphItem>
      5. <animate>
      6. <animateColor>
      7. <animateMotion>
      8. <animateTransform>
    2. B-C
      1. <circle>
      2. <clipPath>
      3. <color-profile>
      4. <cursor>
    3. D
      1. <defs>
      2. <desc>
    4. E
      1. <ellipse>
    5. F
      1. <feBlend>
      2. <feColorMatrix>
      3. <feComponentTransfer>
      4. <feComposite>
      5. <feConvolveMatrix>
      6. <feDiffuseLighting>
      7. <feDisplacementMap>
      8. <feDistantLight>
      9. <feFlood>
      10. <feFuncA>
      11. <feFuncB>
      12. <feFuncG>
      13. <feFuncR>
      14. <feGaussianBlur>
      15. <feImage>
      16. <feMerge>
      17. <feMergeNode>
      18. <feMorphology>
      19. <feOffset>
      20. <fePointLight>
      21. <feSpecularLighting>
      22. <feSpotLight>
      23. <feTile>
      24. <feTurbulence>
      25. <filter>
      26. <font>
      27. <font-face>
      28. <font-face-format>
      29. <font-face-name>
      30. <font-face-src>
      31. <font-face-uri>
      32. <foreignObject>
    6. G
      1. <g>
      2. <glyph>
      3. <glyphRef>
    7. H
      1. <hkern>
    8. I
      1. <image>
    9. J-L
      1. <line>
      2. <linearGradient>
    10. M
      1. <marker>
      2. <mask>
      3. <metadata>
      4. <missing-glyph>
      5. <mpath>
    11. N-P
      1. <path>
      2. <pattern>
      3. <polygon>
      4. <polyline>
    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
      1. <text>
      2. <textPath>
      3. <title>
      4. <tref>
      5. <tspan>
    15. U
      1. <use>
    16. V-Z
      1. <view>
      2. <vkern>

gradientUnits attribute defines the coordinate system used for attributes specified on the gradient elements.

You can use this attribute with the following SVG elements:

  • <linearGradient>
  • <radialGradient>

linearGradient

For <linearGradient> , gradientUnits defines the coordinate system used for the attributes x1 , y1 , x2 ,和 y2 .

值 userSpaceOnUse | objectBoundingBox
默认值 objectBoundingBox
Animatable Yes
userSpaceOnUse

This value indicates that the attributes represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a fill or stroke property) and then applying the transform specified by attribute gradientTransform . Percentages represent values relative to the current SVG viewport.

objectBoundingBox

This value indicates that the user coordinate system for the attributes is established using the bounding box of the element to which the gradient is applied and then applying the transform specified by attribute gradientTransform .

Percentages represent values relative to the bounding box for the object.

With this value and gradientTransform being the identity matrix, the normal of the linear gradient is perpendicular to the gradient vector in object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box). When the object's bounding box is not square, the gradient normal which is initially perpendicular to the gradient vector within object bounding box space may render non-perpendicular relative to the gradient vector in user space. If the gradient vector is parallel to one of the axes of the bounding box, the gradient normal will remain perpendicular. This transformation is due to application of the non-uniform scaling transformation from bounding box space to user space.

radialGradient

For <radialGradient> , gradientUnits defines the coordinate system used for the attributes cx , cy , r , fx , fy ,和 fr .

值 userSpaceOnUse | objectBoundingBox
默认值 objectBoundingBox
Animatable Yes
userSpaceOnUse

cx , cy , r , fx , fy ,和 fr represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a fill or stroke property) and then applying the transform specified by attribute gradientTransform .

objectBoundingBox

for <radialGradient> : the user coordinate system for attributes cx , cy , r , fx , fy ,和 fr is established using the bounding box of the element to which the gradient is applied (see Object bounding box units) and then applying the transform specified by attribute gradientTransform . With this value and gradientTransform being the identity matrix, the rings of the radial gradient are circular with respect to the object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box). When the object's bounding box is not square, the rings that are conceptually circular within object bounding box space will render as elliptical due to application of the non-uniform scaling transformation from bounding box space to user space.

规范

规范 状态 注释
Scalable Vector Graphics (SVG) 2
The definition of 'gradientUnits for <radialGradient>' in that specification.
候选推荐 无变化
Scalable Vector Graphics (SVG) 2
The definition of 'gradientUnits for <linearGradient>' in that specification.
候选推荐 无变化
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'gradientUnits for <radialGradient>' in that specification.
推荐 Initial definition for <radialGradient>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'gradientUnits for <linearGradient>' in that specification.
推荐 Initial definition for <linearGradient>

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 贡献者

版权所有  © 2014-2026 乐数软件    

工业和信息化部: 粤ICP备14079481号-1