草案
本页尚未完工.
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
|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
- 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-color
andlighting-color
presentation attributes.
Value: <color>|inherit
; Animatable: Yes color-interpolation
- It specifies the color space for gradient interpolations, color animations, and alpha compositing.
Value:auto
|sRGB
|linearRGB
|inherit
; Animatable: Yes color-interpolation-filters
- It specifies the color space for imaging operations performed via filter effects.
Value:auto
|sRGB
|linearRGB
|inherit
; Animatable: Yes color-profile
已废弃 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
- 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
- It specifies the mouse cursor displayed when the mouse pointer is over an element.
Value: <FuncIRI>|<keywords>|inherit
; Animatable: Yes direction
- 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
- It indicates what color to use to flood the current filter primitive subregion defined through the
<feFlood>
or<feDropShadow>
element.
Value: <color>; Animatable: Yes flood-opacity
- It indicates the opacity value to use across the current filter primitive subregion defined through the
<feFlood>
or<feDropShadow>
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
- It specifies the size of the font.
Value: see cssfont-size
; Animatable: Yes font-size-adjust
- 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
- It selects a normal, condensed, or expanded face from a font.
Value: see cssfont-stretch
; Animatable: Yes font-style
- 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
- 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
- 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
已废弃 SVG 2- It controls glyph orientation when the inline-progression-direction is horizontal.
Value: <angle>|inherit
; Animatable: No glyph-orientation-vertical
已废弃 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
已废弃 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
- 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
- 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
- Indicates what color to use at that gradient stop.
Value:currentColor
|<color>|<icccolor>|inherit
; Animatable: Yes stop-opacity
- 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-width
used 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
- 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
- -
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
- Specifies spacing behavior between words.
Value: <length>|inherit
; Animatable: Yes writing-mode
- 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
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.