側邊欄

實驗性功能： 這是一個實驗性技術
在生產環境中使用此功能前，請仔細檢視瀏覽器相容性表。

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

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

<textPath>

示例

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

text {
  font:
    25px Arial,
    Helvetica,
    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: 此值將文字放置在路徑的右側（相對於路徑方向）。這實際上反轉了路徑方向。

規範

規範
可縮放向量圖形 (SVG) 2 # TextPathElementSideAttribute

瀏覽器相容性

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。