path()
path()
CSS 函数接受 SVG 路径字符串作为参数,用于 CSS 形状和运动路径模块中绘制形状。path()
函数是 <basic-shape>
数据类型的值。它可以用于 CSS 的 offset-path
和 clip-path
属性,以及 SVG 的 d
属性。
尝试一下
语法
参数
<fill-rule>
可选-
可选值为
nonzero
(默认值,当省略时)或evenodd
,定义填充形状内部的规则。备注:
offset-path
不支持<fill-rule>
值,使用它会使属性失效。 <string>
返回值
返回一个 <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 |
浏览器兼容性
BCD tables only load in the browser