path()
試してみましょう
構文
引数
<'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 |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.