<textPath>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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

<textPath> は SVG の要素で、 <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>`、`<discard>`、`<set>`、`<tspan>`

仕様書

Specification
Scalable Vector Graphics (SVG) 2 # TextPathElement

ブラウザーの互換性

Help improve MDN

Learn how to contribute

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

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