SVGPathElement: getPathSegmentAtLength() メソッド

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

getPathSegmentAtLength() は SVGPathElement インターフェイスのメソッドで、このパス上の指定された位置にあるパス区間を返します。

構文

getPathSegmentAtLength(distance)

引数

distance

このパス上の位置を、先頭からの距離を示す数値です。

返値

パス区間オブジェクトです。有効な区間がない場合は、null を返します。

区間オブジェクトには、以下のようなプロパティがあります。

type

パスコマンドです。

values

コマンドに対応した引数の入った配列または値です。

例

パス区間を取得

次の <path> 要素を考えてみましょう。これは正方形を描画します。

xml
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64">
  <path d="M0,0 h64 v64 h-64 z" />
</svg>

getPathSegmentAtLength() メソッドは、パスに沿って 65px の位置にある v64 区間を表すオブジェクトを返します。

js
const path = document.querySelector("path");

console.log(path.getPathSegmentAtLength(65));

// 出力結果: パス区間
// {
//   type: "v",
//   values: [64]
// }

仕様書

Specification

SVG Paths
# __svg__SVGPathElement__getPathSegmentAtLength

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年12月4日 by MDN contributors.

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

SVGPathElement: getPathSegmentAtLength() メソッド

In this article

構文

引数

返値

例

パス区間を取得

仕様書

ブラウザーの互換性

Help improve MDN