From 055a1e91d6fc009abf2abe516057f47c861163d0 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 12 Aug 2024 16:51:47 -0700 Subject: [PATCH] New page: CSS `d` property (#35395) * New page: CSS property * d attribute page edits * Apply suggestions from code review Co-authored-by: Joshua Chen * Update index.md * Apply suggestions from code review --------- Co-authored-by: Joshua Chen --- files/en-us/web/css/basic-shape/path/index.md | 2 +- files/en-us/web/css/d/index.md | 158 ++++++++++++++++++ files/en-us/web/svg/attribute/d/index.md | 9 +- 3 files changed, 167 insertions(+), 2 deletions(-) create mode 100644 files/en-us/web/css/d/index.md diff --git a/files/en-us/web/css/basic-shape/path/index.md b/files/en-us/web/css/basic-shape/path/index.md index 03a18b1be40e38f..1da60c229870fd8 100644 --- a/files/en-us/web/css/basic-shape/path/index.md +++ b/files/en-us/web/css/basic-shape/path/index.md @@ -15,7 +15,7 @@ There are some limitations to using the `path()` function. The path has to be de ## Syntax -When used in {{cssxref("offset-path")}} or {{SVGAttr("d")}}: +When used in {{cssxref("offset-path")}} or {{cssxref("d")}}: ```css path() diff --git a/files/en-us/web/css/d/index.md b/files/en-us/web/css/d/index.md new file mode 100644 index 000000000000000..8b56d0d527721f0 --- /dev/null +++ b/files/en-us/web/css/d/index.md @@ -0,0 +1,158 @@ +--- +title: d +slug: Web/CSS/d +page-type: css-property +browser-compat: css.properties.d +--- + +{{CSSRef}} + +The **`d`** [CSS](/en-US/docs/Web/CSS) property defines a path to be drawn by the SVG {{SVGElement("path")}} element. If present, it overrides the element's {{SVGAttr("d")}} attribute. + +> [!NOTE] +> The `d` property only applies to {{SVGElement("path")}} elements nested in an {{SVGElement("svg")}}. It doesn't apply to other SVG elements nor to HTML elements or pseudo-elements. + +## Syntax + +```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; +``` + +### Values + +The value is either a {{cssxref("basic-shape/path", "path()")}} function with a single {{cssxref("<string>")}} parameter or the keyword `none`. + +- `none` + - : No path is drawn. +- `path()` + - : A `path()` function with a quoted [data string](/en-US/docs/Web/SVG/Attribute/d) parameter. The data string defines an [SVG path](/en-US/docs/Web/SVG/Element/path). The SVG path data string contains [path commands](/en-US/docs/Web/SVG/Attribute/d#path_commands) that implicitly use pixel units. An empty path is considered invalid. + +## Formal definition + +{{CSSInfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Specifying path data + +This example demonstrates the basic use case of `d`, and how the CSS `d` property takes precedence over the `d` attribute. + +#### HTML + +We include two identical `` elements in an SVG; their `d` attribute values are `"m 5,5 h 90 v 90 h -90 v -90 z"`, which creates a `90px` square. + +```html + + + + +``` + +#### CSS + +With CSS, we style both paths, providing a black {{cssxref("stroke")}} and semi-opaque red {{cssxref("fill")}}. We then use the `d` property to override the value of the SVG {{SVGAttr("d")}} attribute for the last path only. The browser renders SVG images as `300px` wide and `150px` tall by default. + +```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" + ); +} +``` + +#### Results + +{{EmbedLiveSample("Specifying path data", "300", "180")}} + +The second `` is a heart, as defined in the CSS `d` property's `path()` function value. The unstyled ``'s path remained a square, as defined in its SVG `d` attribute value. + +### Animating data paths + +This example demonstrates animating the `d` attribute value. + +#### HTML + +We create a `` containing a single `` element. + +```html + + + +``` + +#### CSS + +We use the `d` attribute to define a heart with a line through it. We use CSS to define the {{cssxref("fill")}}, {{cssxref("stroke")}}, and {{cssxref("stroke-width")}} of that path, and add a two-second {{cssxref("transition")}}. We add a {{cssxref(":hover")}} style that contains a slightly different {{cssxref("basic-shape/path", "path()")}} function; the path has the same number of data points as the default state, making the path animatable. + +```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; +} +``` + +#### Results + +{{EmbedLiveSample("Animating data paths", "300", "180")}} + +To view the animation, hover over the SVG. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- SVG {{SVGAttr("d")}} attribute +- {{cssxref("fill")}} +- {{cssxref("stroke")}} +- {{cssxref("basic-shape/path", "path()")}} function +- {{cssxref("basic-shape")}} data type +- [Overview of CSS shapes](/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes) +- [CSS shapes](/en-US/docs/Web/CSS/CSS_shapes) module diff --git a/files/en-us/web/svg/attribute/d/index.md b/files/en-us/web/svg/attribute/d/index.md index b0a4bd447e6cc82..cd446a82975942a 100644 --- a/files/en-us/web/svg/attribute/d/index.md +++ b/files/en-us/web/svg/attribute/d/index.md @@ -67,7 +67,7 @@ For {{SVGElement('path')}}, `d` is a string containing a series of path commands ## Using d as a CSS property `d` is a presentation attribute, and hence can be also be modified using CSS. -The property takes either [path()](/en-US/docs/Web/CSS/basic-shape/path) or `none`. +The property takes either [`path()`](/en-US/docs/Web/CSS/basic-shape/path) or `none`. The example below shows how you might apply a new path on hover over an element. The new path is the same as the old one, but adds a line across the heart. @@ -103,6 +103,8 @@ svg { {{EmbedLiveSample('Using d as a CSS Property', '100%', 200)}} +For a `` animation example, see the CSS {{cssxref("d")}} property reference page example. + ## Path commands Path commands are instructions that define a path to be drawn. Each command is composed of a command letter and numbers that represent the command parameters. @@ -1089,3 +1091,8 @@ svg { ## Browser compatibility {{Compat}} + +## See also + +- SVG {{SVGElement("path")}} element +- CSS {{cssxref("d")}} property