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

* Some parts of this feature may have varying levels of support.

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

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
textPath
fill
context-fill value
href
path
Experimental
side
Experimental
spacing
startOffset
systemLanguage
textLength
xlink:href
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.
See implementation notes.