path()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年7月⁩.

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

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

試してみましょう

clip-path: path( "M 20 240 \ L 20 80 L 160 80 \ L 160 20 L 280 100 \ L 160 180 L 160 120 \ L 60 120 L 60 240 Z" );

clip-path: path( "M 20 240 \ C 20 0 300 0 300 240 Z" );

<section class="default-example" id="default-example"> <div class="transition-all" id="example-element"></div> </section>

#default-example { background: #fe9; } #example-element { background: linear-gradient(to bottom right, #f52, #05f); width: 100%; height: 100%; }

offset-path や d で使用する場合:

css

path(<string>)

clip-path で使用する場合:

css

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

<'fill-rule'>: パス内の塗りつぶしルールです。指定可能な値は nonzero または evenodd です。既定値は nonzero です。詳細は塗りつぶしルールを参照してください。
<string>: 文字列で、SVG パスを定義するデータ文字列です。

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");

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

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

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

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

<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

This page was last modified on ⁨2025年10月16日⁩ by MDN contributors.