pathLength

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

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

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

例

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>
既定値 none
アニメーション 可

ellipse

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

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

line

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

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

path

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

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

polygon

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

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

polyline

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

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

rect

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

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

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# PathLengthAttribute