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>
例
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 |
ブラウザーの互換性
Loading…