<path>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

<path> SVG要素は図形を定義する汎用的な要素です。全ての基本図形は path 要素によって定義されます。

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    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" />
</svg>

属性

d

この属性は、図形のパスを定義します。 値の型: <string> ; 既定値: ''; アニメーション:

pathLength

この属性は、ユーザー単位系でのパスの全長を指定することを可能にします。 値の型: <number> ; 既定値: none; アニメーション:

使用可能な場所

カテゴリーグラフィック要素、図形要素
許可されている内容任意の数、任意の順序の以下の要素。
アニメーション要素
説明的要素

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# PathElement

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
path
d
d as CSS property supports path()
fill
context-fill value
systemLanguage

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連情報