SVG presentation attributes are CSS properties that can be used as attributes on SVG elements.
alignment-baseline
It specifies how an object is aligned along the font baseline with respect to its parent.
值
:
auto
|
baseline
|
before-edge
|
text-before-edge
|
middle
|
central
|
after-edge
|
text-after-edge
|
ideographic
|
alphabetic
|
hanging
|
mathematical
|
继承
;
Animatable
:
Yes
baseline-shift
It allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element.
值
:
auto
|
baseline
|
super
|
sub
|
<percentage>
|
<length>
|
继承
;
Animatable
:
Yes
clip
It defines what portion of an element is visible.
值
:
auto
|
<shape()>
|
继承
;
Animatable
:
Yes
clip-path
It binds the element it is applied to with a given
<clipPath>
元素。
值
:
none
|
<FuncIRI>
|
继承
;
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.
值
:
nonezero
|
evenodd
|
继承
;
Animatable
:
Yes
color
It provides a potential indirect value (
currentcolor
) for the
fill
,
stroke
,
stop-color
,
flood-color
and
lighting-color
presentation attributes.
值
:
<color>
|
继承
;
Animatable
:
Yes
color-interpolation
It specifies the color space for gradient interpolations, color animations, and alpha compositing.
值
:
auto
|
sRGB
|
linearRGB
|
继承
;
Animatable
:
Yes
color-interpolation-filters
It specifies the color space for imaging operations performed via filter effects.
值
:
auto
|
sRGB
|
linearRGB
|
继承
;
Animatable
:
Yes
color-profile
It defines which color profile a raster image included through the
<image>
element should use.
值
:
auto
|
sRGB
|
linearRGB
|
<name>
|
<IRI>
|
继承
;
Animatable
:
Yes
color-rendering
It provides a hint to the browser about how to optimize its color interpolation and compositing operations.
值
:
auto
|
optimizeSpeed
|
optimizeQuality
|
继承
;
Animatable
:
Yes
cursor
It specifies the mouse cursor displayed when the mouse pointer is over an element.
值
:
<FuncIRI>
|
<keywords>
|
继承
;
Animatable
:
Yes
d
It defines a path to be drawn.
值
:
path()
|
none
direction
It specifies the base writing direction of text.
值
:
ltr
|
rtl
|
继承
;
Animatable
:
Yes
display
It allows to control the rendering of graphical or container elements.
值
: see css
display
;
Animatable
:
Yes
dominant-baseline
It defines the baseline used to align the box’s text and inline-level contents.
值
:
auto
|
text-bottom
|
alphabetic
|
ideographic
|
middle
|
central
|
mathematical
|
hanging
|
text-top
;
Animatable
:
Yes
enable-background
It tells the browser how to manage the accumulation of the background image.
值
:
accumulate
|
new
|
继承
;
Animatable
:
No
fill
It defines the color of the inside of the graphical element it applies to. 值 : <paint> ; Animatable : Yes
fill-opacity
It specifies the opacity of the color or the content the current object is filled with. 值 : <number> | <percentage> ; Animatable : Yes
fill-rule
It indicates how to determine what side of a path is inside a shape.
值
:
nonzero
|
evenodd
|
继承
;
Animatable
:
Yes
filter
It defines the filter effects defined by the
<filter>
element that shall be applied to its element.
值
:
<FuncIRI>
|
none
|
继承
;
Animatable
:
Yes
flood-color
It indicates what color to use to flood the current filter primitive subregion defined through the
<feFlood>
or
<feDropShadow>
元素。
值
:
<color>
;
Animatable
:
Yes
flood-opacity
It indicates the opacity value to use across the current filter primitive subregion defined through the
<feFlood>
or
<feDropShadow>
元素。
值
:
<number>
|
<percentage>
;
Animatable
:
Yes
font-family
It indicates which font family will be used to render the text of the element.
值
: see css
font-family
;
Animatable
:
Yes
font-size
It specifies the size of the font.
值
: see css
font-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.
值
:
<number>
|
none
|
继承
;
Animatable
:
Yes
font-stretch
It selects a normal, condensed, or expanded face from a font.
值
: see css
font-stretch
;
Animatable
:
Yes
font-style
It specifies whether a font should be styled with a normal, italic, or oblique face from its
font-family
.
值
:
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.
值
: see css
font-variant
;
Animatable
:
Yes
font-weight
It specifies the weight (or boldness) of the font.
值
:
normal
|
bold
|
lighter
|
bolder
|
100
|
200
|
300
|
400
|
500
|
600
|
700
|
800
|
900
;
Animatable
:
Yes
glyph-orientation-horizontal
It controls glyph orientation when the inline-progression-direction is horizontal.
值
:
<angle>
|
继承
;
Animatable
:
No
glyph-orientation-vertical
It controls glyph orientation when the inline-progression-direction is vertical.
值
:
auto
|
<angle>
|
继承
;
Animatable
:
No
image-rendering
It provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing.
值
:
auto
|
optimizeQuality
|
optimizeSpeed
;
Animatable
:
Yes
kerning
It indicates whether the browser should adjust inter-glyph spacing.
值
:
auto
|
<length>
|
继承
;
Animatable
:
Yes
letter-spacing
It controls spacing between text characters.
值
:
normal
|
<length>
|
继承
;
Animatable
:
Yes
lighting-color
It defines the color of the light source for filter primitives elements
<feDiffuseLighting>
and
<feSpecularLighting>
.
值
:
<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.
值
:
<FuncIRI>
|
none
|
继承
;
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.
值
:
<FuncIRI>
|
none
|
继承
;
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.
值
:
<FuncIRI>
|
none
|
继承
;
Animatable
:
Yes
mask
It alters the visibility of an element by either masking or clipping the image at specific points.
值
: see css
mask
;
Animatable
:
Yes
opacity
It specifies the transparency of an object or a group of objects. 值 : <opacity-value> ; Animatable : Yes
overflow
Specifies whether the content of a block-level element is clipped when it overflows the element's box.
值
:
visible
|
hidden|scroll
|
auto
|
继承
;
Animatable
:
Yes
pointer-events
Defines whether or when an element may be the target of a mouse event.
值
:
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.
值
:
auto
|
optimizeSpeed
|
crispEdges
|
geometricPrecision
|
继承
;
Animatable
:
Yes
solid-color
- 值 :; Animatable : -
solid-opacity
- 值 :; Animatable : -
stop-color
Indicates what color to use at that gradient stop.
值
:
currentcolor
|
<color>
|
<icccolor>
|
继承
;
Animatable
:
Yes
stop-opacity
Defines the opacity of a given gradient stop.
值
:
<opacity-value>
|
继承
;
Animatable
:
Yes
stroke
Defines the color used to paint the outline of the shape. 值 : <paint> ; Animatable : Yes
stroke-dasharray
Defines the pattern of dashes and gaps used to paint the outline of the shape.
值
:
none
|
<dasharray>
;
Animatable
:
Yes
stroke-dashoffset
Defines an offset on the rendering of the associated dash array. 值 : <percentage> | <length> ; Animatable : Yes
stroke-linecap
Defines the shape to be used at the end of open subpaths when they are stroked.
值
:
butt
|
round
|
square
;
Animatable
:
Yes
stroke-linejoin
Defines the shape to be used at the corners of paths when they are stroked.
值
:
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.
值
:
<number>
;
Animatable
:
Yes
stroke-opacity
Defines the opacity of the stroke of a shape. 值 : <opacity-value> | <percentage> ; Animatable : Yes
stroke-width
Defines the width of the stroke to be applied to the shape. 值 : <length> | <percentage> ; Animatable : Yes
text-anchor
Defines the vertical alignment a string of text.
值
:
start
|
middle
|
end
|
继承
;
Animatable
:
Yes
text-decoration
Sets the appearance of decorative lines on text.
值
:
none
|
underline
|
overline
|
line-through
|
blink
|
继承
;
Animatable
:
Yes
text-rendering
Hints about what tradeoffs to make as the browser renders text.
值
:
auto
|
optimizeSpeed
|
optimizeLegibility
|
geometricPrecision
|
继承
;
Animatable
:
Yes
transform
Defines a list of transform definitions that are applied to an element and the element's children. 值 : <transform-list> ; Animatable : Yes
unicode-bidi
- 值 :; Animatable : -
vector-effect
Specifies the vector effect to use when drawing an object.
值
:
default
|
non-scaling-stroke
|
继承
|
<uri>
;
Animatable
:
Yes
visibility
Lets you control the visibility of graphical elements.
值
:
visible
|
hidden
|
collapse
|
继承
;
Animatable
:
Yes
word-spacing
Specifies spacing behavior between words.
值
:
<length>
|
继承
;
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.
值
:
lr-tb
|
rl-tb
|
tb-rl
|
lr
|
rl
|
tb
|
继承
;
Animatable
:
Yes
BCD tables only load in the browser
最后修改： , 由 MDN 贡献者