path()

path() CSS 函数接受 SVG 路径字符串作为参数,用于 CSS 形状运动路径模块中绘制形状。path() 函数是 <basic-shape> 数据类型的值。它可以用于 CSS 的 offset-pathclip-path 属性,以及 SVG 的 d 属性。

尝试一下

语法

当用于 offset-pathd 时:

css
path(<string>)

当用于 clip-path 时:

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

参数

<fill-rule> 可选

可选值为 nonzero(默认值,当省略时)或 evenodd,定义填充形状内部的规则。

备注: offset-path 不支持 <fill-rule> 值,使用它会使属性失效。

<string>

用于定义 SVG 路径数据字符串。该 <string> 的内容语法与 SVG 相同。

返回值

返回一个 <basic-shape> 值。

形式语法

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

<fill-rule> =
nonzero |
evenodd

示例

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

如果支持将 d 作为 CSS 属性,当你将鼠标悬停在“V”符号上面时,它会垂直翻转。

CSS

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

/* 当悬停时显示此路径 */
#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.

参见