pathLength

pathLength 属性により、ユーザー単位でパスの全長を指定することができます。この値は、距離の計算すべてをpathLength / (パスの長さの計算値) の比率で変倍することで、ブラウザーの距離計算と作成者の距離計算を調整するために使用されています。

これは、テキストパス、アニメーションパス、およびさまざまなストローク操作を含めることができる、実際のレンダリングされたパスの長さに影響を与える可能性があります。基本的に、パスの長さを必要とするすべての計算は、例えば、stroke-dasharray はパスの始まりを 0、終了点をpathLength 属性で定義した値と想定します。

この属性は、次の SVG 要素で使用することができます。

例

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

html

<svg viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">  <style>    path {      fill: none;      stroke: black;      stroke-width: 2;      stroke-dasharray: 10;    }  </style>  <!-- pathLength は使用されておらず、パスの実際の長さが使用されている。その場合、 100 ユーザー単位 -->  <path d="M 0,10 h100" />  <!-- パス長が 90 ユーザー単位の長さであるかのようにすべてを計算する -->  <path d="M 0,20 h100" pathLength="90" />  <!-- パス長が 50 ユーザー単位の長さであるかのようにすべてを計算する -->  <path d="M 0,30 h100" pathLength="50" />  <!-- パス長が 30 ユーザー単位の長さであるかのようにすべてを計算する -->  <path d="M 0,40 h100" pathLength="30" />  <!-- パス長が 10 ユーザー単位の長さであるかのようにすべてを計算する -->  <path d="M 0,50 h100" pathLength="10" /></svg>

circle

<circle> では、pathLength により、円の全長をユーザー単位で指定することができます。

値	<number>
既定値	なし
アニメーション	可

ellipse

<ellipse> では、pathLength により、楕円の全長をユーザー単位で指定することができます。

値	<number>
既定値	なし
アニメーション	可

line

<line> では、pathLength により、線の全長をユーザー単位で指定することができます。

値	<number>
既定値	なし
アニメーション	可

path

<path> では、pathLength により、パスの全長をユーザー単位で指定することができます。

値	<number>
既定値	なし
アニメーション	可

polygon

<polygon> では、pathLength により、図形の全長をユーザー単位で指定することができます。

値	<number>
既定値	なし
アニメーション	可

polyline

<polyline> では、pathLength により、図形の全長をユーザー単位で指定することができます。

値	<number>
既定値	なし
アニメーション	可

rect

<rect> では、pathLength により、矩形の全長をユーザー単位で指定することができます。

値	<number>
既定値	なし
アニメーション	可

仕様書

Specification
Scalable Vector Graphics (SVG) 2 # PathLengthAttribute

Help improve MDN

Learn how to contribute

This page was last modified on2025年8月18日 byMDN contributors.

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

Movatterモバイル変換

pathLength

Help improve MDN