<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       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;アニメーション:可
pathExperimental: テキストが描画されるパスです。値の型:<path_data>;既定値: なし;アニメーション:可
sideExperimental: テキストをパス上のどの辺に描画するかです。値の型:left |right;既定値:left;アニメーション:可
spacing: 文字間をどのように処理すべきかです。値の型:auto |exact;既定値:exact;アニメーション:可
startOffset: テキストの開始位置をパスの開始位置からどれだけずらすか。値の型:<length>|<percentage>|<number>;既定値:0;アニメーション:可
textLength: テキストがレンダリングされる空間の幅。値の型:<length>|<percentage>|<number>;既定値:auto;アニメーション:可

使用コンテキスト

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