path

例

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

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    id="MyPath"
    fill="none"
    stroke="silver"
    d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />

  <text>
    <textPath
      path="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>

animateMotion

<animateMotion> における path は、モーションパスを定義します。このパスは、<path> 要素の d 幾何プロパティと同じ形式で表現され、同様に解釈されます。モーションパスアニメーションの効果は、時間経過に応じて計算された x 値と y 値による、現在のユーザー座標系の x 軸および y 軸に沿った平行移動です。

<path-data>

この値は、参照先の要素の動くモーションパスを定義します。使用可能なコマンドの詳細については、d 属性の説明を参照してください。

textPath

<textPath> における path は、 <text> 要素の文字が描画されるパスを定義します。空の文字列は、要素にパスデータが存在しないことを示します。これは、<textPath> 要素内のテキストが <text> 要素の描画や境界ボックス形成に寄与しないことを意味します。この属性が指定されていない場合、代わりに href で指定されたパスが使用されます。

<path-data>

この値は、<text> 要素のグリフが配置されるテキストパスを定義します。使用可能なコマンドの詳細については、d 属性の説明を参照してください。

仕様書