在此页

• altGlyph
• animate
• animateColor
• animateMotion
• animateTransform
• circle
• ellipse
• path
• polygon
• polyline
• rect
• set
• text
• textPath
• tref
• tspan
• 规范
• 浏览器兼容性
• 相关话题

fill attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color ( or any SVG paint servers like gradients or patterns ) used to paint the element; for animation it defines the final state of the animation.

As a presentation attribute, it can be applied to any element but it only has an effect on the following eleven elements: <altGlyph> , <circle> , <ellipse> , <path> , <polygon> , <polyline> , <rect> , <text> , <textPath> , <tref> ，和 <tspan> .

For animation five elements are using this attribute: <animate> , <animateColor> , <animateMotion> , <animateTransform> ，和 <set> .

html,body,svg { height:100% }
					

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple color fill -->
  <circle cx="50" cy="50" r="40" fill="pink" />
  <!-- Fill circle with a gradient -->
  <defs>
    <radialGradient id="myGradient">
      <stop offset="0%"   stop-color="pink" />
      <stop offset="100%" stop-color="black" />
    </radialGradient>
  </defs>
  <circle cx="150" cy="50" r="40" fill="url(#myGradient)" />
  <!--
  Keeping the final state of an animated circle
  which is a circle with a radius of 40.
  -->
  <circle cx="250" cy="50" r="20">
    <animate attributeType="XML"
             attributeName="r"
             from="0" to="40" dur="5s"
             fill="freeze" />
  </circle>
</svg>
					

altGlyph

警告： As of SVG2 <altGlyph> is deprecated and shouldn't be used.

For <altGlyph> , fill is a presentation attribute that defines the color of the glyph.

Value	<paint>
Default value	black
Animatable	Yes

注意： As a presentation attribute fill can be used as a CSS property.

animate

For <animate> , fill defines the final state of the animation.

Value	freeze ( Keep the state of the last animation frame ) | remove ( Keep the state of the first animation frame )
Default value	remove
Animatable	No

animateColor

警告： As of SVG Animation 2 <animateColor> is deprecated and shouldn't be used. Use <animate> 代替。

For <animateColor> , fill defines the final state of the animation.

Value	freeze ( Keep the state of the last animation frame ) | remove ( Keep the state of the first animation frame )
Default value	remove
Animatable	No

animateMotion

For <animateMotion> , fill defines the final state of the animation.

Value	freeze ( Keep the state of the last animation frame ) | remove ( Keep the state of the first animation frame )
Default value	remove
Animatable	No

animateTransform

For <animateTransform> , fill defines the final state of the animation.

Value	freeze ( Keep the state of the last animation frame ) | remove ( Keep the state of the first animation frame )
Default value	remove
Animatable	No

circle

For <circle> , fill is a presentation attribute that defines the color of the circle.

Value	<paint>
Default value	black
Animatable	Yes

注意： As a presentation attribute fill can be used as a CSS property.

ellipse

For <ellipse> , fill is a presentation attribute that defines the color of the ellipse.

Value	<paint>
Default value	black
Animatable	Yes

注意： As a presentation attribute fill can be used as a CSS property.

path

For <path> , fill is a presentation attribute that defines the color of the interior of the shape. ( Interior is define by the fill-rule attribute )

Value	<paint>
Default value	black
Animatable	Yes

注意： As a presentation attribute fill can be used as a CSS property.

polygon

For <polygon> , fill is a presentation attribute that defines the color of the interior of the shape. ( Interior is define by the fill-rule attribute )

Value	<paint>
Default value	black
Animatable	Yes

注意： As a presentation attribute fill can be used as a CSS property.

polyline

For <polyline> , fill is a presentation attribute that defines tthe color of the interior of the shape. ( Interior is define by the fill-rule attribute )

Value	<paint>
Default value	black
Animatable	Yes

注意： As a presentation attribute fill can be used as a CSS property.

rect

For <rect> , fill is a presentation attribute that defines the color of the rectangle.

Value	<paint>
Default value	black
Animatable	Yes

注意： As a presentation attribute fill can be used as a CSS property.

set

For <set> , fill defines the final state of the animation.

Value	freeze ( Keep the state of the last animation frame ) | remove ( Keep the state of the first animation frame )
Default value	remove
Animatable	No

text

For <text> , fill is a presentation attribute that defines what the color of the text.

Value	<paint>
Default value	black
Animatable	Yes

注意： As a presentation attribute fill can be used as a CSS property.

textPath

For <textPath> , fill is a presentation attribute that defines the color of the text.

Value	<paint>
Default value	black
Animatable	Yes

注意： As a presentation attribute fill can be used as a CSS property.

tref

警告： As of SVG2 <tref> is deprecated and shouldn't be used.

For <tref> , fill is a presentation attribute that defines the color of the text.

Value	<paint>
Default value	black
Animatable	Yes

注意： As a presentation attribute fill can be used as a CSS property.

tspan

For <tspan> , fill is a presentation attribute that defines the color of the text.

Value	<paint>
Default value	black
Animatable	Yes

注意： As a presentation attribute fill can be used as a CSS property.

规范

规范	状态	注释
SVG Animations Level 2 The definition of 'transform' in that specification.	编者草案	Definition for animations
Scalable Vector Graphics (SVG) 2 The definition of 'fill' in that specification.	候选推荐	Definition for shapes and texts. 添加 context-fill and context-stroke .
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'fill' in that specification.	推荐	Initial definition for animations
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'fill' in that specification.	推荐	Initial definition for shapes and texts

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
fill	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?

图例

兼容性未知 ?

兼容性未知

注意： For information on using the context-fill (and context-stroke ) values from HTML documents, see the documentation for the non-standard -moz-context-properties 特性。

元数据

• 最后修改： Oct 4, 2019

相关话题

1. SVG Elements

   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>