<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feDistantLight>
<feFlood>
<feFuncA>
<feFuncB>
<feFuncG>
<feFuncR>
<feGaussianBlur>
<feImage>
<feMerge>
<feMergeNode>
<feMorphology>
<feOffset>
<fePointLight>
<feSpecularLighting>
<feSpotLight>
<feTile>
<feTurbulence>
<filter>
<font>
<font-face>
<font-face-format>
<font-face-name>
<font-face-src>
<font-face-uri>
<foreignObject>
d
attribute defines a path to be drawn.
A path definition is a list of path commands where each command is composed of a command letter and numbers that represent the command parameters. The commands are detailed below .
You can use this attribute with the following SVG elements:
<path>
,
<glyph>
,
<missing-glyph>
.
d
是
presentation attribute
, and hence can be also be
used as a CSS property
.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="red"
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z" />
</svg>
For
<path>
,
d
is a string containing a series of path commands that define the path to be drawn.
| 值 | <string> |
|---|---|
| 默认值 | none |
| Animatable | Yes |
警告：
As of SVG2
<glyph>
is deprecated and shouldn't be used.
For
<glyph>
,
d
is a string containing a series of path commands that define the outline shape of the glyph.
| 值 | <string> |
|---|---|
| 默认值 | none |
| Animatable | Yes |
注意：
The point of origin (the coordinate
0
,
0
) is usually the
upper left corner
of the context. However the
<glyph>
element has its origin in the
bottom left corner
of its letterbox.
警告：
As of SVG2
<missing-glyph>
is deprecated and shouldn't be used.
For
<missing-glyph>
,
d
is a string containing a series of path commands that define the outline shape of the glyph.
| 值 | <string> |
|---|---|
| 默认值 | none |
| Animatable | Yes |
d
是
presentation attribute
, and hence can be also be modified using CSS.
The property takes either
path()
or
none
.
The example below shows how you might apply a new path on hover over an element. The new path is the same as the old one, but adds a line across the heart.
html,body,svg { height:100% }
/* This path is displayed on hover*/
#svg_css_ex1:hover path {
d: path("M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90")
}
<svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="red"
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z
" />
</svg>
Path commands are instructions that define a path to be drawn. Each command is composed of a command letter and numbers that represent the command parameters.
SVG defines 6 types of path commands, for a total of 20 commands:
M
,
m
L
,
l
,
H
,
h
,
V
,
v
C
,
c
,
S
,
s
Q
,
q
,
T
,
t
A
,
a
Z
,
z
注意： Commands are case-sensitive . An upper-case command specifies absolute coordinates, while a lower-case command specifies coordinates relative to the current position.
It is always possible to specify a negative value as an argument to a command:
MoveTo instructions can be thought of as picking up the drawing instrument, and setting it down somewhere else—in other words, moving the current point ( P o ; { x o , y o }). There is no line drawn between P o and the new current point ( P n ; { x n , y n }).
| 命令 | 参数 | 注意事项 |
|---|---|---|
| M |
(
x
,
y
)+
|
Move the
current point
to the coordinate
x
,
y
. Any subsequent coordinate pair(s) are interpreted as parameter(s)
for implicit absolute LineTo (
L
) command(s) (
see below
).
Formula:
P
n
= {
|
| m |
(
dx
,
dy
)+
|
Move the
current point
by shifting the last known position of
the path by
dx
along the x-axis and by
dy
along the y-axis. Any subsequent coordinate
pair(s) are interpreted as parameter(s) for implicit relative LineTo
(
l
) command(s) (
see below
).
Formula:
P
n
= {
x
o
+
|
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="red"
d="M 10,10 h 10
m 0,10 h 10
m 0,10 h 10
M 40,20 h 10
m 0,10 h 10
m 0,10 h 10
m 0,10 h 10
M 50,50 h 10
m-20,10 h 10
m-20,10 h 10
m-20,10 h 10" />
</svg>
LineTo instructions draw a straight line from the current point ( P o ; { x o , y o }) to the end point ( P n ; { x n , y n }), based on the parameters specified. The end point ( P n ) then becomes the current point for the next command ( P o ′ ).
| 命令 | 参数 | 注意事项 |
|---|---|---|
| L |
(
x
,
y
)+
|
Draw a line from the
current point
到
end point
指定通过
x
,
y
. Any subsequent coordinate pair(s) are interpreted as parameter(s)
for implicit absolute LineTo (
L
) command(s).
Formula:
P
o
′
=
P
n
= {
|
| l |
(
dx
,
dy
)+
|
Draw a line from the
current point
到
end point,
which is the
current point
shifted by
dx
沿 X 轴和
dy
along the y-axis. Any subsequent coordinate
pair(s) are interpreted as parameter(s) for implicit relative LineTo
(
l
) command(s) (
see below
).
Formula:
P
o
′
=
P
n
= {
x
o
+
|
| H |
x
+
|
Draw a horizontal line from the
current point
到
end point
, which is specified by the
x
参数和
current point's
y
coordinate. Any subsequent value(s) are interpreted as
parameter(s) for implicit absolute horizontal LineTo (
H
)
command(s).
Formula:
P
o
′
=
P
n
= {
|
| h |
dx
+
|
Draw a horizontal line from the
current point
到
end point,
which is specified by the
current point
shifted by
dx
along the
x-axis and the
current point's
y
coordinate. Any
subsequent value(s) are interpreted as parameter(s) for implicit
relative horizontal LineTo (
h
) command(s).
Formula:
P
o
′
=
P
n
= {
x
o
+
|
| V |
y
+
|
Draw a vertical line from the
current point
到
end point
, which is specified by the
y
参数和
current point's
x
coordinate. Any subsequent values are interpreted as
parameters for implicit absolute vertical LineTo (
V
)
command(s).
Formula:
P
o
′
=
P
n
= {
x
o
,
|
| v |
dy
+
|
Draw a vertical line from the
current point
到
end point,
which is specified by the
current point
shifted by
dy
along the
y-axis and the
current point's
x
coordinate. Any
subsequent value(s) are interpreted as parameter(s) for implicit
relative vertical LineTo (
v
) command(s).
Formula:
P
o
′
=
P
n
= {
x
o
,
y
o
+
|
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<!-- LineTo commands with absolute coordinates -->
<path fill="none" stroke="red"
d="M 10,10
L 90,90
V 10
H 50" />
<!-- LineTo commands with relative coordinates -->
<path fill="none" stroke="red"
d="M 110,10
l 80,80
v -80
h -40" />
</svg>
Cubic Bézier curves are smooth curve definitions using four points:
( P o = { x o , y o })
( P n = { x n , y n })
( P cs = { x cs , y cs }) (controls curvature near the start of the curve)
( P ce = { x ce , y ce }) (controls curvature near the end of the curve)
After drawing, the end point ( P n ) becomes the current point for the next command ( P o ′ ).
| 命令 | 参数 | 注意事项 |
|---|---|---|
| C |
(
x1
,
y1
,
x2
,
y2
,
x
,
y
)+
|
Draw a cubic Bézier curve from the
current point
到
end point
指定通过
x
,
y
。
start control point
is specified by
x1
,
y1
and the
end control point
is
指定通过
x2
,
y2
. Any subsequent triplet(s) of coordinate pairs are interpreted as
parameter(s) for implicit absolute cubic Bézier curve (
C
)
command(s).
|
| c |
(
dx1
,
dy1
,
dx2
,
dy2
,
dx
,
dy
)+
|
Draw a cubic Bézier curve from the
current point
到
end point,
which is the
current point
shifted by
dx
沿 X 轴和
dy
along the y-axis. The
start control point
是
current point
(starting
point of the curve) shifted by
dx1
along the
x-axis and
dy1
along the y-axis. The
end control point
是
current point
(starting
point of the curve) shifted by
dx2
along the
x-axis and
dy2
along the y-axis. Any
subsequent triplet(s) of coordinate pairs are interpreted as
parameter(s) for implicit relative cubic Bézier curve (
c
)
command(s).
|
| S |
(
x2
,
y2
,
x
,
y
)+
|
Draw a smooth cubic Bézier curve from the
current point
到
end point
指定通过
x
,
y
。
end control point
is specified by
x2
,
y2
。
start control point
is a reflection of the
end control point
of the previous curve command. If the
previous command wasn't a cubic Bézier curve, the
start control point
is the same as the curve starting point
(
current point
). Any subsequent pair(s) of coordinate pairs are
interpreted as parameter(s) for implicit absolute smooth cubic Bézier
curve (
S
) commands.
|
| s |
(
dx2
,
dy2
,
dx
,
dy
)+
|
Draw a smooth cubic Bézier curve from the
current point
到
end point
, which is the
current point
shifted by
dx
沿 X 轴和
dy
along the y-axis. The
end control point
是
current point
(starting point
of the curve) shifted by
dx2
along the x-axis
and
dy2
along the y-axis. The
start control point
is a reflection of the
end control point
of the previous curve command. If the
previous command wasn't a cubic Bézier curve, the
start control point
is the same as the curve starting point
(
current point
). Any subsequent pair(s) of coordinate pairs are
interpreted as parameter(s) for implicit relative smooth cubic Bézier
curve (
s
) commands.
|
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Cubic Bézier curve with absolute coordinates -->
<path fill="none" stroke="red"
d="M 10,90
C 30,90 25,10 50,10
S 70,90 90,90" />
<!-- Cubic Bézier curve with relative coordinates -->
<path fill="none" stroke="red"
d="M 110,90
c 20,0 15,-80 40,-80
s 20,80 40,80" />
<!-- Highlight the curve vertex and control points -->
<g id="ControlPoints">
<!-- First cubic command control points -->
<line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" />
<circle cx="30" cy="90" r="1.5"/>
<line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" />
<circle cx="25" cy="10" r="1.5"/>
<!-- Second smooth command control points (the first one is implicit) -->
<line x1="50" y1="10" x2="75" y2="10" stroke="lightgrey" stroke-dasharray="2" />
<circle cx="75" cy="10" r="1.5" fill="lightgrey"/>
<line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" />
<circle cx="70" cy="90" r="1.5" />
<!-- curve vertex points -->
<circle cx="10" cy="90" r="1.5"/>
<circle cx="50" cy="10" r="1.5"/>
<circle cx="90" cy="90" r="1.5"/>
</g>
<use xlink:href="#ControlPoints" x="100" />
</svg>
Quadratic Bézier curves are smooth curve definitions using three points:
P o = { x o , y o }
P n = { x n , y n }
P c = { x c , y c } (controls curvature)
After drawing, the end point ( P n ) becomes the current point for the next command ( P o ′ ).
| 命令 | 参数 | 注意事项 |
|---|---|---|
| Q |
(
x1
,
y1
,
x
,
y
)+
|
Draw a quadratic Bézier curve from the
current point
到
end point
指定通过
x
,
y
。
control point
is specified by
x1
,
y1
. Any subsequent pair(s) of coordinate pairs are interpreted as
parameter(s) for implicit absolute quadratic Bézier curve
(
Q
) command(s).
|
| q |
(
dx1
,
dy1
,
dx
,
dy
)+
|
Draw a quadratic Bézier curve from the
current point
到
end point
, which is the
current point
shifted by
dx
沿 X 轴和
dy
along the y-axis. The
control point
是
current point
(starting point
of the curve) shifted by
dx1
along the x-axis
and
dy1
along the y-axis. Any subsequent
pair(s) of coordinate pairs are interpreted as parameter(s) for
implicit relative quadratic Bézier curve (
q
) command(s).
|
| T |
(
x
,
y
)+
|
Draw a smooth quadratic Bézier curve from the
current point
到
end point
指定通过
x
,
y
。
control point
is a reflection of the
control point
of the previous curve command. If the previous
command wasn't a quadratic Bézier curve, the
control point
is
the same as the curve starting point (
current point
). Any
subsequent coordinate pair(s) are interpreted as parameter(s) for
implicit absolute smooth quadratic Bézier curve (
T
)
command(s).
|
| t |
(
dx
,
dy
)+
|
Draw a smooth quadratic Bézier curve from the
current point
到
end point
, which is the
current point
shifted by
dx
along the
x-axis and
dy
along the y-axis. The
control point
is a reflection of the
control point
of the previous curve command. If the previous
command wasn't a quadratic Bézier curve, the
control point
is
the same as the curve starting point (
current point
). Any
subsequent coordinate pair(s) are interpreted as parameter(s) for
implicit relative smooth quadratic Bézier curve (
t
)
command(s).
|
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Quadratic Bézier curve with implicit repetition -->
<path fill="none" stroke="red"
d="M 10,50
Q 25,25 40,50
t 30,0 30,0 30,0 30,0 30,0" />
<!-- Highlight the curve vertex and control points -->
<g>
<polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" />
<circle cx="25" cy="25" r="1.5" />
<!-- Curve vertex points -->
<circle cx="10" cy="50" r="1.5"/>
<circle cx="40" cy="50" r="1.5"/>
<g id="SmoothQuadraticDown">
<polyline points="40,50 55,75 70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" />
<circle cx="55" cy="75" r="1.5" fill="lightgrey" />
<circle cx="70" cy="50" r="1.5" />
</g>
<g id="SmoothQuadraticUp">
<polyline points="70,50 85,25 100,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" />
<circle cx="85" cy="25" r="1.5" fill="lightgrey" />
<circle cx="100" cy="50" r="1.5" />
</g>
<use xlink:href="#SmoothQuadraticDown" x="60" />
<use xlink:href="#SmoothQuadraticUp" x="60" />
<use xlink:href="#SmoothQuadraticDown" x="120" />
</g>
</svg>
Elliptical arc curves are curves defined as a portion of an ellipse. It is sometimes easier to draw highly regular curves with an elliptical arc than with a Bézier curve.
| 命令 | 参数 | 注意事项 |
|---|---|---|
| A |
(
rx
ry
angle
large-arc-flag
sweep-flag
x
y
)+
|
Draw an Arc curve from the current point to the coordinate
x
,
y
. The center of the ellipse used to draw the arc is determined
automatically based on the other parameters of the command:
x
,
y
becomes the new current point for the next
command. All subsequent sets of parameters are considered implicit
absolute arc curve (
A
) commands.
|
| a |
(
rx
ry
angle
large-arc-flag
sweep-flag
dx
dy
)+
|
Draw an Arc curve from the current point to a point for which
coordinates are those of the current point shifted by
dx
沿 X 轴和
dy
along the y-axis. The center of the ellipse
used to draw the arc is determined automatically based on the other
parameters of the command:
dx
and
dy
for the next
command. All subsequent sets of parameters are considered implicit
relative arc curve (
a
) commands.
|
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<!-- The influence of the arc flags with which the arc is drawn -->
<path fill="none" stroke="red"
d="M 6,10
A 6 4 10 1 0 14,10" />
<path fill="none" stroke="lime"
d="M 6,10
A 6 4 10 1 1 14,10" />
<path fill="none" stroke="purple"
d="M 6,10
A 6 4 10 0 1 14,10" />
<path fill="none" stroke="pink"
d="M 6,10
A 6 4 10 0 0 14,10" />
</svg>
ClosePath instructions draw a straight line from the current position to the first point in the path.
| 命令 | 参数 | 注意事项 |
|---|---|---|
| Z, z | Close the current subpath by connecting the last point of the path with its initial point. If the two points are at different coordinates, a straight line is drawn between those two points. |
注意：
The appearance of a shape closed with
ClosePath
may be different to that of one closed by drawing a line to the origin, using one of the other commands, because the line ends are joined together (according to the
stroke-linejoin
setting), rather than just being placed at the same coordinates.
<svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg">
<!--
An open shape with the last point of
the path different to the first one
-->
<path stroke="red"
d="M 5,1
l -4,8 8,0" />
<!--
An open shape with the last point of
the path matching the first one
-->
<path stroke="red"
d="M 15,1
l -4,8 8,0 -4,-8" />
<!--
A closed shape with the last point of
the path different to the first one
-->
<path stroke="red"
d="M 25,1
l -4,8 8,0
z" />
</svg>
| 规范 | 状态 | 注释 |
|---|---|---|
|
Scalable Vector Graphics (SVG) 2
The definition of 'd' in that specification. |
候选推荐 |
Definition for
<path>
|
|
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'd' in that specification. |
推荐 |
Initial definition for
<glyph>
and
<missing-glyph>
|
|
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'd' in that specification. |
推荐 |
Initial definition for
<path>
|
BCD tables only load in the browser
最后修改： , 由 MDN 贡献者