側

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性： 這是一項實驗性技術
在生產中使用此技術之前，請仔細檢查瀏覽器相容性表格。

side 屬性決定了文字放置在路徑的哪一側（相對於路徑方向）。

你可以將此屬性與以下 SVG 元素一起使用

<textPath>

示例

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

text {
  font:
    25px "Helvetica",
    "Arial",
    sans-serif;
}

html

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <text>
    <textPath href="#circle1" side="left">Text left from the path</textPath>
  </text>
  <text>
    <textPath href="#circle2" side="right">Text right from the path</textPath>
  </text>

  <circle
    id="circle1"
    cx="100"
    cy="100"
    r="70"
    fill="transparent"
    stroke="silver" />
  <circle
    id="circle2"
    cx="320"
    cy="100"
    r="70"
    fill="transparent"
    stroke="silver" />
</svg>

用法說明

值	`left` \| `right`
預設值	`left`
可動畫的	是

left: 此值將文字放置在路徑的左側（相對於路徑方向）。
right: 此值將文字放置在路徑的右側（相對於路徑方向）。這實際上會反轉路徑方向。

規範

規範
Scalable Vector Graphics (SVG) 2 # TextPathElementSideAttribute

瀏覽器相容性

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年10月13日，由 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的可能問題