-
SVG 元素
-
A
-
<a>
-
<altGlyph>
-
<altGlyphDef>
-
<altGlyphItem>
-
<animate>
-
<animateColor>
-
<animateMotion>
-
<animateTransform>
-
B-C
-
<circle>
-
<clipPath>
-
<color-profile>
-
<cursor>
-
D
-
<defs>
-
<desc>
-
E
-
<ellipse>
-
F
-
<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>
-
G
-
<g>
-
<glyph>
-
<glyphRef>
-
H
-
<hkern>
-
I
-
<image>
-
J-L
-
<line>
-
<linearGradient>
-
M
-
<marker>
-
<mask>
-
<metadata>
-
<missing-glyph>
-
<mpath>
-
N-P
-
<path>
-
<pattern>
-
<polygon>
-
<polyline>
-
Q-R
-
<radialGradient>
-
<rect>
-
S
-
<script>
-
<set>
-
<stop>
-
<style>
-
<svg>
-
<switch>
-
<symbol>
-
T
-
<text>
-
<textPath>
-
<title>
-
<tref>
-
<tspan>
-
U
-
<use>
-
V-Z
-
<view>
-
<vkern>
orient
attribute indicates how a marker is rotated when it is placed at its position on the shape.
You can use this attribute with the following SVG elements:
html, body, svg {
height: 100%;
}
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="6" markerHeight="6"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id="dataArrow" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="6" markerHeight="6"
orient="-65deg">
<path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
</marker>
</defs>
<polyline points="10,10 10,90 90,90" fill="none" stroke="black"
marker-start="url(#arrow)" marker-end="url(#arrow)" />
<polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey"
marker-start="url(#dataArrow)" marker-mid="url(#dataArrow)"
marker-end="url(#dataArrow)" />
</svg>
|
值
|
auto
|
auto-start-reverse
|
<angle>
|
<number>
|
|
默认值
|
0
|
|
Animatable
|
Yes (non-additive)
|
-
auto
This value indicates that the marker is oriented such that its positive x-axis is pointing in a direction relative to the path at the position the marker is placed.
-
auto-start-reverse
If placed by
marker-start
, the marker is oriented 180° different from the orientation that would be used if
auto
where specified. For all other markers,
auto-start-reverse
means the same as
auto
.
注意：
This allows a single arrowhead marker to be defined that can be used for both the start and end of a path, i.e. which points outwards from both ends.
-
<angle>
This value indicates that the marker is oriented such that the specified angle is that measured between the shape's positive x-axis and the marker's positive x-axis.
注意：
For example, if a value of
45
is given, then the marker's positive x-axis would be pointing down and right in the shape's coordinate system.
-
<number>
This value indicates an angle in degrees. The marker is oriented such that the specified angle is that measured between the shape's positive x-axis and the marker's positive x-axis.
BCD tables only load in the browser
Found a problem with this page?
最后修改：
,
由 MDN 贡献者
