path()

path()CSS関数で、 SVG のパス文字列を受け取り、 CSS シェイプや CSS モーションパスで描画される形状を有効にするために使用します。

試してみましょう

構文

offset-pathd で使用する場合:

css
path(<string>)

clip-path で使用する場合:

css
path([<'fill-rule'>,]?<string>)

引数

<'fill-rule'>

パス内の塗りつぶしルールです。 指定可能な値は nonzero または evenodd です。 既定値は nonzero です。 詳細は塗りつぶしルールを参照してください。

<string>

文字列で、SVG パスを定義するデータ文字列です。

path() の正しい値の例

css
path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");

offset-path の値として使用

path() 関数が、アイテムが一周するためのパスを作成するために使用されています。いずれかの値を変更すると、パスがきれいに円を描かなくなります。

SVG パスで d 属性の値を変更する

path() は SVG の d 属性 の値を変更するために使用することができます。 CSS で none に設定することも可能です。

"V" マークは、 CSS のプロパティとして d が対応していれば、カーソルを置いたときに縦に反転します。

CSS

css
html,
body,
svg {
  height: 100%;
}

/* This path is displayed on hover*/
#svg_css_ex1:hover path {
  d: path("M20,80 L50,20 L80,80");
}

HTML

html
<svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="red" d="M20,20 L50,80 L80,20" />
</svg>

結果

仕様書

Specification
CSS Shapes Module Level 1
# funcdef-basic-shape-path

ブラウザーの互換性

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()
In clip-path
In d as CSS property
In offset-path
In shape-outside

Legend

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

Full support
Full support
No support
No support
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報