New CSS property page: fill

files/en-us/_redirects.txt

@@ -11612,7 +11612,6 @@
 /en-US/docs/Web/CSS/element()	/en-US/docs/Web/CSS/element
 /en-US/docs/Web/CSS/env()	/en-US/docs/Web/CSS/env
 /en-US/docs/Web/CSS/fallback	/en-US/docs/Web/CSS/@counter-style/fallback
-/en-US/docs/Web/CSS/fill	/en-US/docs/Web/SVG/Attribute/fill
 /en-US/docs/Web/CSS/fill-opacity	/en-US/docs/Web/SVG/Attribute/fill-opacity
 /en-US/docs/Web/CSS/fill-rule	/en-US/docs/Web/SVG/Attribute/fill-rule
 /en-US/docs/Web/CSS/filter-function/blur()	/en-US/docs/Web/CSS/filter-function/blur

files/en-us/web/css/fill/index.md

@@ -0,0 +1,256 @@
+---
+title: fill
+slug: Web/CSS/fill
+page-type: css-property
+browser-compat: css.properties.fill
+---
+
+{{CSSRef}}
+
+The **`fill`** [CSS](/en-US/docs/Web/CSS) property defines how SVG text content and SVG shape's interior canvas are filled or painted. If present, it overrides the element's {{SVGAttr("fill")}} attribute
+
+The areas inside the outline of the SVG shape or text are painted. For complex shapes, the areas considered "inside" the shape to be painted are clarified by the {{cssxref("fill-rule")}} property or attribute. If subpaths are open, `fill` closes the path before painting, as if a "closepath" command were included connecting the last point of the subpath with the first point of the subpath. In other words, `fill` applies to open subpaths within `path` elements (i.e., subpaths without a closepath command) and `polyline` elements.
+
+> [!NOTE]
+> The `fill` property only applies to {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} elements nested in an {{SVGElement("svg")}}. It doesn't apply other SVG, HTML, or pseudo-elements.
+
+## Syntax
+
+```css
+/* keywords */
+fill: none;
+fill: context-fill;
+fill: context-stroke;
+
+/* <color> values */
+fill: red;
+fill: hsl(120deg 75% 25% / 60%);
+
+/* <url> values */
+fill: url(#gradientElementID);
+fill: url(star.png);
+
+/* <url> with fallback */
+fill: url(#gradientElementID) blue;
+fill: url(star.png) none;
+
+/* Global values */
+fill: inherit;
+fill: initial;
+fill: revert;
+fill: revert-layer;
+fill: unset;
+```
+
+### Values
+
+- `none`
+
+  - : No `fill` is painted; the areas inside the stroke, if any, are transparent.
+
+- `context-fill`
+
+  - : Uses the paint value of `fill` from a context element.
+
+- `context-stroke`
+
+  - : Uses the paint value of `stroke` from a context element.
+
+- {{cssxref("color_value", "&lt;color>")}}
+
+  - : The color of the fill as any valid CSS {{cssxref("color_value", "&lt;color>")}} value.
+
+- `<url>`
+
+  - : A URL reference to an SVG paint server element, such as {{SVGElement("linearGradient")}}, {{SVGElement("radialGradient")}}, or {{SVGElement("pattern")}} element. The resource reference can optionally be followed by a fall-back `<color>` or `none` which will be used as a fallback if the paint server referenced doesn't resolve.
+
+## Formal definition
+
+{{CSSInfo}}
+
+## Formal syntax
+
+{{csssyntax}}
+
+## Examples
+
+### Defining fill values for SVG elements
+
+This example demonstrates how a `fill` is declared, the effect of the property, and how the CSS `fill` property takes precedence over the `fill` attribute.
+
+#### HTML
+
+We have an SVG with two complex shapes defined using the SVG {{SVGElement('polygon')}} and {{SVGElement('path')}} elements. Both have the `fill` attribute set to a black (equal to the default). We add dark grey stroke of `#666` using the SVG {{SVGAttr("stroke")}} attribute but could have used the {{CSSXRef("stroke")}} property.
+
+```html
+<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z"
+    stroke="#666"
+    fill="#000" />
+  <polygon
+    points="180,10 150,100 220,40 140,40 210,100"
+    stroke="#666"
+    fill="#000" />
+</svg>
+```
+
+#### CSS
+
+We set `fill` values on the the shapes in the SVG.
+
+```css hidden
+svg {
+  border: 1px solid;
+  height: calc(100vh - 20px);
+  margin-bottom: 10px;
+}
+```
+
+```css
+path {
+  fill: red;
+}
+polygon {
+  fill: hsl(0deg 100% 50% / 60%);
+}
+```
+
+#### Results
+
+{{EmbedLiveSample("Defining fill values for SVG elements", "300", "170")}}
+
+The CSS `fill` property value overrides the SVG `fill` attribute value, with both shapes being red; the polygon's red being translucent.
+
+### Using fill keyword values
+
+This example demonstrates how the keyword values for `fill`
+
+#### HTML
+
+We include three {{SVGElement("path")}} elements, then add a {{SVGElement("marker")}} element that adds a {{SVGElement("circle")}} at every path point. We set the circle marker to be black with a grey fill with the SVG {{SVGAttr("stroke")}} and {{SVGAttr("fill")}} attributes.
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 90">
+  <path d="M 10 44.64 L 30 10 L 70 10 L 90 44.64 L 70 79.28 L 30 79.28 Z" />
+  <path d="M 100 44.64 L 80 10 L 120 10 L 140 44.64 L 120 79.28 L 80 79.28 Z" />
+  <path
+    d="M 150 44.64 L 130 10 L 170 10 L 190 44.64 L 170 79.28 L 130 79.28 Z" />
+  <marker
+    id="circle"
+    markerWidth="12"
+    markerHeight="12"
+    refX="6"
+    refY="6"
+    markerUnits="userSpaceOnUse">
+    <circle cx="6" cy="6" r="3" stroke-width="2" stroke="black" fill="grey" />
+  </marker>
+</svg>
+```
+
+#### CSS
+
+We set different `stroke` and `fill` colors on each path. The first path, the one with a red border, has its `fill` set to `none`. We set the circle markers to have a fill that is the same color as the stroke of the element they're marking with the `context-stroke` value.
+
+```css hidden
+svg {
+  border: 1px solid;
+  height: calc(100vh - 20px);
+  margin-bottom: 10px;
+}
+```
+
+```css
+path {
+  stroke-width: 2px;
+  marker: url(#circle);
+}
+path:nth-of-type(1) {
+  stroke: red;
+  fill: none;
+}
+path:nth-of-type(2) {
+  stroke: green;
+  fill: lightgreen;
+}
+path:nth-of-type(3) {
+  stroke: blue;
+  fill: lightblue;
+}
+circle {
+  stroke: context-stroke;
+  fill: context-stroke;
+}
+```
+
+#### Results
+
+{{EmbedLiveSample("Using fill keyword values", "300", "170")}}
+
+Note how the first path has a transparent background because the `fill` is `none`, overriding the default `fill` of `black`. The circles are filled with the color of the stroke. If you change the value to `context-fill`, the circles would be transparent, `lightgreen` and `lightblue` instead of `red`, `green`, and `blue`.
+
+### Fills and fallbacks
+
+This example demonstrates how to include a `url()` value with a fallback as a`fill` value.
+
+#### HTML
+
+We have an SVG with two SVG {{SVGElement("polygon")}} stars and a{{SVGElement("linearGradient")}} that goes from green to gold to red.
+
+```html
+<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="myGradient">
+      <stop offset="5%" stop-color="green" />
+      <stop offset="50%" stop-color="gold" />
+      <stop offset="95%" stop-color="red" />
+    </linearGradient>
+  </defs>
+  <polygon points="80,10 50,100 120,40 40,40 110,100" />
+  <polygon points="180,10 150,100 220,40 140,40 210,100" />
+</svg>
+```
+
+#### CSS
+
+We set `fill` values on the polygons in the SVG, providing a `url()` value and a fallback.
+
+```css hidden
+svg {
+  border: 1px solid;
+  height: calc(100vh - 20px);
+  margin-bottom: 10px;
+}
+```
+
+```css
+polygon:first-of-type {
+  fill: url("#myGradient") magenta;
+}
+polygon:last-of-type {
+  fill: url("#MISSINGIMAGE") magenta;
+}
+```
+
+#### Results
+
+{{EmbedLiveSample("Fills and fallbacks", "300", "170")}}
+
+The first star has a gradient as a background. The second star uses the fallback value, as the element referenced in the `url()` doees not exist.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- SVG {{SVGAttr("fill")}} attribute
+- Presentation properties: `fill`, {{cssxref("clip-rule")}}, , {{cssxref("color-interpolation-filters")}}, {{cssxref("fill-opacity")}}, {{cssxref("fill-rule")}}, {{cssxref("marker-end")}}, {{cssxref("marker-mid")}}, {{cssxref("marker-start")}}, {{cssxref("shape-rendering")}}, {{cssxref("stop-color")}}, {{cssxref("stop-opacity")}}, {{cssxref("stroke")}}, {{cssxref("stroke-dasharray")}}, {{cssxref("stroke-dashoffset")}}, {{cssxref("stroke-linecap")}}, {{cssxref("stroke-linejoin")}}, {{cssxref("stroke-miterlimit")}}, {{cssxref("stroke-opacity")}}, {{cssxref("stroke-width")}}, {{cssxref("text-anchor")}}, and {{cssxref("vector-effect")}}
+- {{cssxref("opacity")}}
+- {{cssxref("background-color")}}
+- {{cssxref("color_value", "&lt;color>")}}
+- {{cssxref("basic-shape")}} data type

files/en-us/web/svg/attribute/fill/index.md

@@ -2,14 +2,24 @@
 title: fill
 slug: Web/SVG/Attribute/fill
 page-type: svg-attribute
-browser-compat: svg.global_attributes.fill
+browser-compat:
+  - svg.elements.circle.fill
+  - svg.elements.ellipse.fill
+  - svg.elements.path.fill
+  - svg.elements.polygon.fill
+  - svg.elements.polyline.fill
+  - svg.elements.rect.fill
+  - svg.elements.text.fill
+  - svg.elements.textPath.fill
+  - svg.elements.tref.fill
+  - svg.elements.tspan.fill
 ---
 
 {{SVGRef}}
 
 The **`fill`** attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (_or any SVG paint servers like gradients or patterns_) used to paint the element; for animation it defines the final state of the animation.
 
-You can use this attribute with the following SVG elements:
+The SVG presentational `fill` attribute and the CSS {{cssxref("fill")}} property can be used with the following SVG elements:
 
 - {{SVGElement('circle')}}
 - {{SVGElement('ellipse')}}
@@ -22,7 +32,12 @@ You can use this attribute with the following SVG elements:
 - {{SVGElement('tref')}}
 - {{SVGElement('tspan')}}
 
-For animation, these elements are using this attribute: {{SVGElement('animate')}}, {{SVGElement('animateMotion')}}, {{SVGElement('animateTransform')}}, and {{SVGElement('set')}}.
+The SVG `fill` attribute can be used to define the final animation state with the following SVG elements:
+
+- {{SVGElement('animate')}}
+- {{SVGElement('animateMotion')}}
+- {{SVGElement('animateTransform')}}
+- {{SVGElement('set')}}.
 
 ## Examples
 
@@ -240,7 +255,7 @@ For {{SVGElement('ellipse')}}, `fill` is a presentation attribute that defines t
 
 ## path
 
-For {{SVGElement('path')}}, `fill` is a presentation attribute that defines the color of the interior of the shape. (_Interior is define by the {{SVGAttr('fill-rule')}} attribute_)
+For {{SVGElement('path')}}, `fill` is a presentation attribute that defines the color of the interior of the shape. (_The interior is defined by the {{SVGAttr('fill-rule')}} attribute or {{cssxref("fill-rule")}} property._)
 
 <table class="properties">
   <tbody>
@@ -268,7 +283,7 @@ For {{SVGElement('path')}}, `fill` is a presentation attribute that defines the
 
 ## polygon
 
-For {{SVGElement('polygon')}}, `fill` is a presentation attribute that defines the color of the interior of the shape. (_Interior is define by the {{SVGAttr('fill-rule')}} attribute_)
+For {{SVGElement('polygon')}}, `fill` is a presentation attribute that defines the color of the interior of the shape. (_The interior is defined by the {{SVGAttr('fill-rule')}} attribute or {{cssxref("fill-rule")}} property._)
 
 <table class="properties">
   <tbody>
@@ -296,7 +311,7 @@ For {{SVGElement('polygon')}}, `fill` is a presentation attribute that defines t
 
 ## polyline
 
-For {{SVGElement('polyline')}}, `fill` is a presentation attribute that defines the color of the interior of the shape. (_Interior is define by the {{SVGAttr('fill-rule')}} attribute_)
+For {{SVGElement('polyline')}}, `fill` is a presentation attribute that defines the color of the interior of the shape. (_The interior is defined by the {{SVGAttr('fill-rule')}} attribute or {{cssxref("fill-rule")}} property._)
 
 <table class="properties">
   <tbody>