orient
orient 属性指示标记在其在形状上的位置旋转的方式。
你可以将此属性与以下 SVG 元素一起使用
示例
html
<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-
此值表示标记的方向，使其正 x 轴指向标记放置在形状上的路径方向。
auto-start-reverse-
如果由
marker-start放置，则标记的方向与指定auto时使用的方向相差 180°。对于所有其他标记，auto-start-reverse的含义与auto相同。注意： 这允许定义一个单一的箭头标记，该标记可用于路径的起点和终点，即从两端向外指向。
<angle>-
此值指示标记的方向，指定的角度是形状的正 x 轴与标记的正 x 轴之间的夹角。
注意： 例如，如果给定的值为
45，则在形状的坐标系中，标记的正 x 轴将指向右下方。 <number>-
此值表示角度（以度为单位）。标记的方向是指定的角度是形状的正 x 轴与标记的正 x 轴之间的夹角。
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # OrientAttribute |
浏览器兼容性
加载中…