内容表

• 范例
• 属性
• 用法注意事项
• 规范
• 浏览器兼容性

<linearGradient>

1. <lineargradient>
2. <radialgradient>
3. <stop>
4. 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>

<linearGradient> element lets authors define linear gradients to apply to other SVG elements.

范例

html,body,svg { height:100% }

					

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%"  stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>
  <!-- using my linear gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>

					

属性

gradientUnits

This attribute defines the coordinate system for attributes x1 , x2 , y1 , y2 Value type :  userSpaceOnUse | objectBoundingBox ; 默认值 : objectBoundingBox ; Animatable :  yes

gradientTransform

This attribute provides additional transformation to the gradient coordinate system. Value type : <transform-list> ; 默认值 : identity transform ; Animatable :  yes

href

This attribute defines a reference to another <linearGradient> element that will be used as a template. Value type : <URL> ; 默认值 : none; Animatable : yes

spreadMethod

This attribute indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient. Value type : pad | reflect | repeat ; 默认值 : pad ; Animatable :  yes

x1

This attribute defines the x coordinate of the starting point of the vector gradient along which the linear gradient is drawn. Value type : <length-percentage> | <number> ; 默认值 : 0% ; Animatable : yes

x2

This attribute defines the x coordinate of the ending point of the vector gradient along which the linear gradient is drawn. Value type : <length-percentage> | <number> ; 默认值 : 100% ; Animatable : yes

xlink:href

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the 兼容性表格 at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

An <IRI> reference to another <linearGradient> element that will be used as a template. Value type : <IRI> ; 默认值 : none; Animatable : yes

y1

This attribute defines the y coordinate of the starting point of the vector gradient along which the linear gradient is drawn. Value type : <length-percentage> | <number> ; 默认值 : 0% ; Animatable : yes

y2

This attribute defines the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn. Value type : <length-percentage> | <number> ; 默认值 : 0% ; Animatable : yes

全局属性

Core Attributes

Most notably: id

Styling Attributes

class , style

Event Attributes

Global event attributes , Document element event attributes

Presentation Attributes

Most notably: clip-path , clip-rule , color , color-interpolation , color-rendering , cursor , display , fill , fill-opacity , fill-rule , filter , mask , opacity , pointer-events , shape-rendering , stroke , stroke-dasharray , stroke-dashoffset , stroke-linecap , stroke-linejoin , stroke-miterlimit , stroke-opacity , stroke-width , transform , vector-effect , visibility

XLink Attributes

xlink:href , xlink:title

用法注意事项

类别	Gradient element
准许内容	Any number of the following elements, in any order: Descriptive elements <animate> , <animateTransform> , <set> , <stop>

规范

规范
Scalable Vector Graphics (SVG) 1.1 (Second Edition) (SVG) # LinearGradients

浏览器兼容性

BCD tables only load in the browser

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 .

最后修改： Jan 7, 2022 , 由 MDN 贡献者