<textPath>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

<path> の図形に沿ってテキストを表示するには、テキストを <textPath> 要素で囲み、その要素に href 属性を指定して <path> 要素を参照します。

例

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

html

<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>

属性

href: テキストを表示するパスまたは基本図形への URL です。 path 属性を設定した場合、 href は効果がありません。 値の型: <URL> ; 既定値: なし; アニメーション: 可
lengthAdjust: テキストの長さを調整する場所です。文字間、または空間と文字の両方。 値の型: spacing|spacingAndGlyphs; 既定値: spacing; アニメーション: 可
method: パスに沿って個々の文字描画する方法です。 値の型: align|stretch ; 既定値: align; アニメーション: 可
path Experimental: テキストが描画されるパスです。 値の型: <path_data> ; 既定値: なし; アニメーション: 可
side Experimental: テキストをパス上のどの辺に描画するかです。 値の型: left|right ; 既定値: left; アニメーション: 可
spacing: 文字間をどのように処理すべきかです。 値の型: auto|exact ; 既定値: exact; アニメーション: 可
startOffset: テキストの開始位置をパスの開始位置からどれだけずらすか。 値の型: <length>|<percentage>|<number> ; 既定値: 0; アニメーション: 可
textLength: テキストがレンダリングされる空間の幅。 値の型: <length>|<percentage>|<number> ; 既定値: auto; アニメーション: 可

使用コンテキスト

カテゴリー	テキストコンテンツ要素、テキストコンテンツの子要素
許可されている内容	任意の順で文字データと任意の数の以下の要素。説明的要素 `<a>`、`<animate>`、`<set>`、`<tref>`、`<tspan>`

仕様書

Specification
Scalable Vector Graphics (SVG) 2 # TextPathElement

ブラウザーの互換性

BCD tables only load in the browser