orient

orient 属性指示标记在其放置在形状上的位置时如何旋转。

您可以将此属性与以下 SVG 元素一起使用

<marker>

示例

html,
body,
svg {
  height: 100%;
}

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` \| `auto-start-reverse` \| `<angle>` \| `<number>`
默认值	`0`
可动画	是（非累加）

auto: 此值表示标记的方向，使其正 x 轴指向相对于路径在放置标记的位置的方向。
auto-start-reverse: 如果由marker-start放置，则标记的方向与指定 auto 时使用的方向相差 180°。对于所有其他标记，auto-start-reverse 的含义与 auto 相同。

注意：这允许定义单个箭头标记，该标记可用于路径的起点和终点，即从两端向外指向。
<angle>: 此值表示标记的方向，使其指定角度为形状的正 x 轴与标记的正 x 轴之间的夹角。

注意：例如，如果给出 45 的值，则标记的正 x 轴将在形状的坐标系中向下和向右指向。
<number>: 此值表示以度为单位的角度。标记的方向，使其指定角度为形状的正 x 轴与标记的正 x 轴之间的夹角。

规范

规范
可缩放矢量图形 (SVG) 2 # OrientAttribute

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。