d

**d** CSS 属性定义了 SVG <path> 元素要绘制的路径。如果存在，它将覆盖元素的 d 属性。

**注意：**d 属性仅适用于嵌套在 <svg> 中的 <path> 元素。它不适用于其他 SVG 元素，也不适用于 HTML 元素或伪元素。

语法

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: #f338;
  stroke: #000;
}

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 上。

规范

规范
可缩放矢量图形 (SVG) 2
# TheDProperty

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅