d
语法
css
/* Default */
d: none;
/* Basic usage */
d: path("m 5,5 h 35 L 20,30 z");
d: path("M 0,25 l 50,150 l 200,50 z");
d: path("M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z");
/* Global values */
d: inherit;
d: initial;
d: revert;
d: revert-layer;
d: unset;
值
该值可以是带有单个 <string> 参数的 path() 函数，也可以是关键字 none。
none-
不绘制路径。
path(<string>)-
带有带引号的 数据字符串 参数的
path()函数。数据字符串定义了 SVG 路径。SVG 路径数据字符串包含隐式使用像素单位的路径命令。空路径被视为无效。
正式定义
正式语法
d =
none |
<string>
示例
指定路径数据
此示例演示了 d 的基本用例，以及 CSS d 属性如何优先于 d 属性。
HTML
我们在 SVG 中包含两个相同的 <path> 元素；它们的 d 属性值为 "m 5,5 h 90 v 90 h -90 v -90 z"，它创建了一个 90px 的正方形。
html
<svg>
<path d="m 5,5 h 90 v 90 h -90 v -90 z" />
<path d="m 5,5 h 90 v 90 h -90 v -90 z" />
</svg>
CSS
使用 CSS，我们为两条路径设置样式，提供黑色 stroke 和半透明的红色 fill。然后，我们使用 d 属性仅覆盖最后一条路径的 SVG d 属性的值。浏览器默认将 SVG 图像渲染为 300px 宽和 150px 高。
css
svg {
border: 1px solid;
}
path {
fill: #ff333388;
stroke: black;
}
path:last-of-type {
d: path(
"M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z"
);
}
结果
第二个 <path> 是一个心形，如 CSS d 属性的 path() 函数值中所定义。未设置样式的 <path> 的路径仍然是一个正方形，如其 SVG d 属性值中所定义。
动画数据路径
此示例演示了 d 属性值的动画。
HTML
我们创建一个包含单个 <path> 元素的 <svg>。
html
<svg>
<path />
</svg>
CSS
我们使用 d 属性定义一个带有一条线的爱心。我们使用 CSS 定义该路径的 fill、stroke 和 stroke-width，并添加一个两秒的 transition。我们添加一个 :hover 样式，其中包含一个略有不同的 path() 函数；该路径具有与默认状态相同数量的数据点，使路径可动画化。
css
svg {
border: 1px solid;
}
path {
d: path(
"M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M90,5 L5,90"
);
transition: all 2s;
fill: none;
stroke: red;
stroke-width: 3px;
}
svg:hover path {
d: path(
"M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90"
);
stroke: black;
}
结果
要查看动画，请将鼠标悬停在 SVG 上。
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # D 属性 |
浏览器兼容性
加载中…