このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
SVGPathElement: setPathData() メソッド
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
SVGPathElement.setPathData() メソッドは、パス区間の並びを新しいパスデータとして設定します。
構文
js
setPathData(pathData)
引数
pathData-
パス区間の配列です。 それぞれのパス区間は、以下のプロパティを持つオブジェクトです。
type- : パスコマンドです。
- : パスコマンドです。
options.normalizeが true であれば、これは絶対コマンド('M','L','C','Z')のいずれかになります。
values
-
コマンドに対応する引数の入った配列または値です。
返値
なし (undefined)。
例
パスデータの設定
正方形を描く次の <path> 要素があったとします。
xml
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64">
<path d="M0,0 h64 v64 h-64 z" />
</svg>
以下のコードであは、getPathData() メソッドを使用して、正規化されたパスデータを絶対コマンドで取得します。
返されたデータを <path> 要素に setPathData() メソッドを使用して設定すると、DOM 内のパスコマンドのセットが異なるものになります。
js
const svgPath = document.querySelector("path");
const pathData = path.getPathData({ normalize: true });
svgPath.setPathData(pathData);
// <path d="M 0 0 L 64 0 L 64 64 L 0 64 Z" />
仕様書
| 仕様書 |
|---|
| SVG Paths # __svg__SVGPathData__setPathData |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。