side

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

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">パスの左側</textPath>
  </text>
  <text>
    <textPath href="#circle2" side="right">パスの右側</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: この値は、パスの（パスの方向に対して）右側にテキストを配置します。これにより、事実上パスの方向が反転します。

仕様書

Specification
Scalable Vector Graphics (SVG) 2 # TextPathElementSideAttribute

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年11月18日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content