SVG Presentation Attributes
SVG表现属性是能够被用在SVG元素属性上的CSS属性。
- alignment-baseline
- baseline-shift
- clip
- clip-path
- clip-rule
- color
- color-interpolation
- color-interpolation-filters
- color-profile
- color-rendering
- cursor
- direction
- display
- dominant-baseline
- enable-background
- fill
- fill-opacity
- fill-rule
- filter
- flood-color
- flood-opacity
- font-family
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-variant
- font-weight
- glyph-orientation-horizontal
- glyph-orientation-vertical
- image-rendering
- kerning
- letter-spacing
- lighting-color
- marker-end
- marker-mid
- marker-start
- mask
- opacity
- overflow
- pointer-events
- shape-rendering
- solid-color
- solid-opacity
- stop-color
- stop-opacity
- stroke
- stroke-dasharray
- stroke-dashoffset
- stroke-linecap
- stroke-linejoin
- stroke-miterlimit
- stroke-opacity
- stroke-width
- text-anchor
- text-decoration
- text-rendering
- transform
- unicode-bidi
- vector-effect
- visibility
- word-spacing
- writing-mode
Attributes
alignment-baseline- It specifies how an object is aligned along the font baseline with respect to its parent.
Value:auto|baseline|before-edge|text-before-edge|middle|central|after-edge|text-after-edge|ideographic|alphabetic|hanging|mathematical|inherit; Animatable: Yes baseline-shift- It allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element.
Value:auto|baseline|super|sub|<percentage>|<length>|inherit; Animatable: Yes clip已废弃- It defines what portion of an element is visible.
Value:auto|shape(en-US)|inherit; Animatable: Yes clip-path- It binds the element it is applied to with a given
<clipPath>element.
Value:none|<FuncIRI>|inherit; Animatable: Yes clip-rule (en-US)- It indicates how to determine what side of a path is inside a shape in order to know how a
<clipPath>should clip its target.
Value:nonezero|evenodd|inherit; Animatable: Yes color- It provides a potential indirect value (
currentColor) for thefill,stroke,stop-color,flood-colorandlighting-colorpresentation attributes.
Value: <color>|inherit; Animatable: Yes color-interpolation (en-US)- It specifies the color space for gradient interpolations, color animations, and alpha compositing.
Value:auto|sRGB|linearRGB|inherit; Animatable: Yes color-interpolation-filters (en-US)- It specifies the color space for imaging operations performed via filter effects.
Value:auto|sRGB|linearRGB|inherit; Animatable: Yes color-profile (en-US)已废弃 SVG 2- It defines which color profile a raster image included through the
<image>element should use.
Value:auto|sRGB|linearRGB|<name>|<IRI>|inherit; Animatable: Yes color-rendering (en-US)- It provides a hint to the browser about how to optimize its color interpolation and compositing operations.
Value:auto|optimizeSpeed|optimizeQuality|inherit; Animatable: Yes cursor (en-US)- It specifies the mouse cursor displayed when the mouse pointer is over an element.
Value: <FuncIRI>|<keywords>|inherit; Animatable: Yes direction (en-US)- It specifies the base writing direction of text.
Value:ltr|rtl|inherit; Animatable: Yes display- It allows to control the rendering of graphical or container elements.
Value: see cssdisplay; Animatable: Yes dominant-baseline- It defines the baseline used to align the box’s text and inline-level contents.
Value:auto|text-bottom|alphabetic|ideographic|middle|central|mathematical|hanging|text-top; Animatable: Yes enable-background已废弃 SVG 2- It tells the browser how to manage the accumulation of the background image.
Value:accumulate|new|inherit; Animatable: No fill- It defines the color of the inside of the graphical element it applies to.
Value: <paint>; Animatable: Yes fill-opacity- It specifies the opacity of the color or the content the current object is filled with.
Value: <number>|<percentage>; Animatable: Yes fill-rule- It indicates how to determine what side of a path is inside a shape.
Value:nonzero|evenodd|inherit; Animatable: Yes filter- It defines the filter effects defined by the
<filter>element that shall be applied to its element.
Value: <FuncIRI>|none|inherit; Animatable: Yes flood-color (en-US)- It indicates what color to use to flood the current filter primitive subregion defined through the
<feFlood>or<feDropShadow>(en-US) element.
Value: <color>; Animatable: Yes flood-opacity (en-US)- It indicates the opacity value to use across the current filter primitive subregion defined through the
<feFlood>or<feDropShadow>(en-US) element.
Value: <number>|<percentage>; Animatable: Yes font-family- It indicates which font family will be used to render the text of the element.
Value: see cssfont-family; Animatable: Yes font-size (en-US)- It specifies the size of the font.
Value: see cssfont-size; Animatable: Yes font-size-adjust (en-US)- It specifies that the font size should be chosen based on the height of lowercase letters rather than the height of capital letters.
Value: <number>|none|inherit; Animatable: Yes font-stretch (en-US)- It selects a normal, condensed, or expanded face from a font.
Value: see cssfont-stretch; Animatable: Yes font-style (en-US)- It specifies whether a font should be styled with a normal, italic, or oblique face from its
font-family.
Value:normal|italic|oblique; Animatable: Yes font-variant (en-US)- It specifies whether a font should be used with some of their variation such as small caps or ligatures.
Value: see cssfont-variant; Animatable: Yes font-weight (en-US)- It specifies the weight (or boldness) of the font.
Value:normal|bold|lighter|bolder|100|200|300|400|500|600|700|800|900; Animatable: Yes glyph-orientation-horizontal (en-US)已废弃 SVG 2- It controls glyph orientation when the inline-progression-direction is horizontal.
Value: <angle>|inherit; Animatable: No glyph-orientation-vertical (en-US)已废弃 SVG 2- It controls glyph orientation when the inline-progression-direction is vertical.
Value:auto|<angle>|inherit; Animatable: No image-rendering- It provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing.
Value:auto|optimizeQuality|optimizeSpeed; Animatable: Yes kerning (en-US)已废弃 SVG 2- It indicates whether the browser should adjust inter-glyph spacing.
Value:auto|<length>|inherit; Animatable: Yes letter-spacing- It controls spacing between text characters.
Value:normal|<length>|inherit; Animatable: Yes lighting-color (en-US)- It defines the color of the light source for filter primitives elements
<feDiffuseLighting>and<feSpecularLighting>.
Value: <color>; Animatable: Yes marker-end- It defines the arrowhead or polymarker that will be drawn at the final vertex of the given
<path>element or basic shape.
Value: <FuncIRI>|none|inherit; Animatable: Yes marker-mid (en-US)- It defines the arrowhead or polymarker that will be drawn at every vertex other than the first and last vertex of the given
<path>element or basic shape.
Value: <FuncIRI>|none|inherit; Animatable: Yes marker-start- It defines the arrowhead or polymarker that will be drawn at the first vertex of the given
<path>element or basic shape.
Value: <FuncIRI>|none|inherit; Animatable: Yes mask- It alters the visibility of an element by either masking or clipping the image at specific points.
Value: see cssmask; Animatable: Yes opacity- It specifies the transparency of an object or a group of objects.
Value: <opacity-value>; Animatable: Yes overflow- Specifies whether the content of a block-level element is clipped when it overflows the element's box.
Value:visible|hidden|scroll|auto|inherit; Animatable: Yes pointer-events- Defines whether or when an element may be the target of a mouse event.
Value:bounding-box|visiblePainted|visibleFil|visibleStroke|visible|painted|fill|stroke|all|none; Animatable: Yes shape-rendering- Hints about what tradeoffs to make as the browser renders
<path>element or basic shapes.
Value:auto|optimizeSpeed|crispEdges|geometricPrecision|inherit; Animatable: Yes solid-color- -
Value:; Animatable: - solid-opacity- -
Value:; Animatable: - stop-color (en-US)- Indicates what color to use at that gradient stop.
Value:currentColor|<color>|<icccolor>|inherit; Animatable: Yes stop-opacity (en-US)- Defines the opacity of a given gradient stop.
Value: <opacity-value>|inherit; Animatable: Yes stroke- Defines the color used to paint the outline of the shape.
Value: <paint>; Animatable: Yes stroke-dasharray- Defines the pattern of dashes and gaps used to paint the outline of the shape.
Value:none|<dasharray>; Animatable: Yes stroke-dashoffset- Defines an offset on the rendering of the associated dash array.
Value: <percentage>|<length>; Animatable: Yes stroke-linecap- Defines the shape to be used at the end of open subpaths when they are stroked.
Value:butt|round|square; Animatable: Yes stroke-linejoin- Defines the shape to be used at the corners of paths when they are stroked.
Value:arcs|bevel|miter|miter-clip|round; Animatable: Yes stroke-miterlimit- Defines a limit on the ratio of the miter length to the
stroke-widthused to draw a miter join.
Value: <number>; Animatable: Yes stroke-opacity- Defines the opacity of the stroke of a shape.
Value: <opacity-value>|<percentage>; Animatable: Yes stroke-width- Defines the width of the stroke to be applied to the shape.
Value: <length>|<percentage>; Animatable: Yes text-anchor- Defines the vertical alignment a string of text.
Value:start|middle|end|inherit; Animatable: Yes text-decoration- Sets the appearance of decorative lines on text.
Value:none|underline|overline|line-through|blink|inherit; Animatable: Yes text-rendering (en-US)- Hints about what tradeoffs to make as the browser renders text.
Value:auto|optimizeSpeed|optimizeLegibility|geometricPrecision|inherit; Animatable: Yes transform- Defines a list of transform definitions that are applied to an element and the element's children.
Value: <transform-list>; Animatable: Yes unicode-bidi (en-US)- -
Value:; Animatable: - vector-effect- Specifies the vector effect to use when drawing an object.
Value:default|non-scaling-stroke|inherit|<uri>; Animatable: Yes visibility- Lets you control the visibility of graphical elements.
Value:visible|hidden|collapse|inherit; Animatable: Yes word-spacing (en-US)- Specifies spacing behavior between words.
Value: <length>|inherit; Animatable: Yes writing-mode (en-US)- Specifies whether the initial inline-progression-direction for a
<text>element shall be left-to-right, right-to-left, or top-to-bottom.
Value:lr-tb|rl-tb|tb-rl|lr|rl|tb|inherit; Animatable: Yes
Browser compatibility
BCD tables only load in the browser