orient

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

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 軸之間的夾角。

規範

規範
Scalable Vector Graphics (SVG) 2 # OrientAttribute

瀏覽器相容性

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年6月23日⁩，由 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤