<textPath>

使用コンテキスト

属性

href

テキストを表示するパスまたは基本図形への URL です。 path 属性を設定した場合、 href は効果がありません。 値の型: <URL>; デフォルト値: なし; アニメーション: 可

lengthAdjust

テキストの長さを調整する場所です。文字間、または空間と文字の両方。 値の型: spacing | spacingAndGlyphs; デフォルト値: spacing; アニメーション: 可

method

パスに沿って個々の文字描画する方法です。 値の型: align | stretch; デフォルト値: align; アニメーション: 可

path

テキストが描画されるパスです。 値の型: <path_data>; デフォルト値: なし; アニメーション: 可

side

テキストをパス上のどの辺に描画するかです。 値の型: left | right; デフォルト値: left; アニメーション: 可

spacing

文字間をどのように処理すべきかです。 値の型: auto | exact; デフォルト値: exact; アニメーション: 可

startOffset

テキストの開始位置をパスの開始位置からどれだけずらすか。 値の型: <length>|<percentage>|<number>; デフォルト値: 0; アニメーション: 可

textLength

テキストがレンダリングされる空間の幅。 値の型: <length>|<percentage>|<number>; デフォルト値: auto; アニメーション: 可

DOM インターフェイス

この要素は SVGTextPathElement インターフェイスを実装しています。

例

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

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- to hide the path, it is usually wrapped in a <defs> element -->
  <!-- <defs> -->
  <path
    id="MyPath"
    fill="none"
    stroke="red"
    d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <!-- </defs> -->

  <text>
    <textPath href="#MyPath">Quick brown fox jumps over the lazy dog.</textPath>
  </text>
</svg>

仕様書

ブラウザーの互換性