SVGPathElement: getPointAtLength() メソッド
getPointAtLength() は SVGPathElement インターフェイスのメソッドで、このパス沿いの指定された位置の点を返します。
構文
js
getPointAtLength(distance) 引数
distance-
このパス上の位置を、先頭からの距離を示す数値です。
返値
このパスに沿った指定された位置にある点を示す DOMPoint です。
例
<path> の中点を取得
この例では、パスの長さのちょうど中間点となる点を取得することで、パスの中点を決定します。
SVG を定義します。これには基本的な直線と複雑なハート形の 2 つのパスが含まれます。
ハートを構成するパスの長さは、約 275 単位です。
html
<svg width="200" height="100"> <path id="heart" fill="red" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /> <path id="line" d="M 0,30 h100" stroke="black" /> </svg> 直線は水平で、0, 30 から始まり、長さは 100 単位です。 ハートのパスは 10, 30 から始まり、長さは約 275 単位です。
直線の長さは 100 単位とわかっているため、中点は 50 です。 ハートのパスの長さを、SVGPathElement.getTotalLength() メソッドで取得し、長さの中点を取得するために 2 で割ります。 それから getPointAtLength() メソッドを使用すると、DOMPoint で中点が返ります。 それぞれの中点の x および y 座標を表示します。
js
const basicPath = document.getElementById("line"); const complexPath = document.getElementById("heart"); // ハートの長さを取得して 2 で割る const halfLength = complexPath.getTotalLength() / 2; // getPointAtLength メソッドにアクセス const basicMidPoint = basicPath.getPointAtLength(50); const complexMidPoint = complexPath.getPointAtLength(halfLength); // pathLength 属性のベースの値 log(`直線の中点: ${basicMidPoint.x}, ${basicMidPoint.y}`); log(`ハートの中点: ${complexMidPoint.x}, ${complexMidPoint.y}`); 仕様書
| Specification |
|---|
| SVG Paths # __svg__SVGPathElement__getPointAtLength |