Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New pages: CSS SVG filter properites #36783

Merged
merged 3 commits into from
Nov 14, 2024
Merged

New pages: CSS SVG filter properites #36783

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
50aa81f
New pages: CSS SVG filter properites
estelle Nov 14, 2024
f556c0c
Merge branch 'main' into svg
bsmth Nov 14, 2024
d753152
Update files/en-us/web/css/css_color_adjustment/index.md
estelle Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions files/en-us/_redirects.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -701,8 +701,6 @@
/en-US/docs/CSS/flex-shrink /en-US/docs/Web/CSS/flex-shrink
/en-US/docs/CSS/flex-wrap /en-US/docs/Web/CSS/flex-wrap
/en-US/docs/CSS/float /en-US/docs/Web/CSS/float
/en-US/docs/CSS/flood-color /en-US/docs/Web/SVG/Attribute/flood-color
/en-US/docs/CSS/flood-opacity /en-US/docs/Web/SVG/Attribute/flood-opacity
/en-US/docs/CSS/font /en-US/docs/Web/CSS/font
/en-US/docs/CSS/font-family /en-US/docs/Web/CSS/font-family
/en-US/docs/CSS/font-feature-settings /en-US/docs/Web/CSS/font-feature-settings
Expand Down Expand Up @@ -733,7 +731,6 @@
/en-US/docs/CSS/left /en-US/docs/Web/CSS/left
/en-US/docs/CSS/length /en-US/docs/Web/CSS/length
/en-US/docs/CSS/letter-spacing /en-US/docs/Web/CSS/letter-spacing
/en-US/docs/CSS/lighting-color /en-US/docs/Web/SVG/Attribute/lighting-color
/en-US/docs/CSS/line-height /en-US/docs/Web/CSS/line-height
/en-US/docs/CSS/linear-gradient /en-US/docs/Web/CSS/gradient/linear-gradient
/en-US/docs/CSS/list-style /en-US/docs/Web/CSS/list-style
Expand Down Expand Up @@ -11627,8 +11624,6 @@
/en-US/docs/Web/CSS/flex-line-pack /en-US/docs/Web/CSS/align-content
/en-US/docs/Web/CSS/flex-order /en-US/docs/Web/CSS/order
/en-US/docs/Web/CSS/flex-pack /en-US/docs/Web/CSS/justify-content
/en-US/docs/Web/CSS/flood-color /en-US/docs/Web/SVG/Attribute/flood-color
/en-US/docs/Web/CSS/flood-opacity /en-US/docs/Web/SVG/Attribute/flood-opacity
/en-US/docs/Web/CSS/font-size/font-optical-sizing /en-US/docs/Web/CSS/font-optical-sizing
/en-US/docs/Web/CSS/gradient/conic-gradient() /en-US/docs/Web/CSS/gradient/conic-gradient
/en-US/docs/Web/CSS/gradient/linear-gradient() /en-US/docs/Web/CSS/gradient/linear-gradient
Expand All @@ -11652,7 +11647,6 @@
/en-US/docs/Web/CSS/inset-area_value /en-US/docs/Web/CSS/position-area_value
/en-US/docs/Web/CSS/justify-tracks /en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout
/en-US/docs/Web/CSS/kerning /en-US/docs/Web/CSS/font-kerning
/en-US/docs/Web/CSS/lighting-color /en-US/docs/Web/SVG/Attribute/lighting-color
/en-US/docs/Web/CSS/linear-gradient /en-US/docs/Web/CSS/gradient/linear-gradient
/en-US/docs/Web/CSS/linear-gradient() /en-US/docs/Web/CSS/gradient/linear-gradient
/en-US/docs/Web/CSS/margin-new /en-US/docs/Web/CSS/margin
Expand Down
11 changes: 6 additions & 5 deletions files/en-us/web/css/css_color_adjustment/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,14 @@ Together with the {{CSSxRef("@media")}} features {{cssxref("@media/prefers-color
- {{cssxref("color")}}
- {{cssxref("color-scheme")}}
- {{cssxref("column-rule-color")}}
- [`fill`](/en-US/docs/Web/SVG/Attribute/fill)
- [`flood-color`](/en-US/docs/Web/SVG/Attribute/flood-color)
- [`lighting-color`](/en-US/docs/Web/SVG/Attribute/lighting-color)
- {{cssxref("fill")}}
- {{cssxref("flood-color")}}
estelle marked this conversation as resolved.
Show resolved Hide resolved
- {{cssxref("flood-opacity")}}
- {{cssxref("lighting-color")}}
- {{cssxref("outline-color")}}
- {{cssxref("scrollbar-color")}}
- [`stop-color`](/en-US/docs/Web/SVG/Attribute/stop-color)
- [`stroke`](/en-US/docs/Web/SVG/Attribute/stroke)
- {{cssxref("stop-color")}}
- {{cssxref("stroke")}}
- {{cssxref("text-decoration-color")}}
- {{cssxref("text-emphasis-color")}}
- {{cssxref("text-shadow")}}
Expand Down
123 changes: 123 additions & 0 deletions files/en-us/web/css/flood-color/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
---
title: flood-color
slug: Web/CSS/flood-color
page-type: css-property
browser-compat: css.properties.flood-color
---

{{CSSRef}}

The **`flood-color`** [CSS](/en-US/docs/Web/CSS) property defines the color of the current filter primitive subregion in {{SVGElement("feFlood")}} and {{SVGElement("feDropShadow")}} elements within a {{SVGElement("filter")}}. If present, it overrides the element's {{SVGAttr("flood-color")}} attribute.

> [!NOTE]
> The `flood-color` property only applies to {{SVGElement("feFlood")}} and {{SVGElement("feDropShadow")}} elements nested in an {{SVGElement("svg")}}. It doesn't apply to other SVG, HTML, or pseudo-elements.

## Syntax

```css
/* <color> values */
flood-color: red;
flood-color: hsl(120deg 75% 25% / 60%);
flood-color: currentcolor;

/* Global values */
flood-color: inherit;
flood-color: initial;
flood-color: revert;
flood-color: revert-layer;
flood-color: unset;
```

### Values

- {{cssxref("color_value", "&lt;color>")}}

- : The flood's color. This can be any valid CSS {{cssxref("color_value", "&lt;color>")}} value.

## Formal definition

{{CSSInfo}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is missing data


## Formal syntax

{{csssyntax}}

## Examples

### Defining the color of a filters flood

This example demonstrates the basic use case of `flood-color`, and how the CSS `flood-color` property takes precedence over the `flood-color` attribute.

#### HTML

We have an SVG with two {{SVGElement("filter")}} elements, each with a {{SVGElement("feFlood")}} child. Each `<feFlood>` element includes the SVG `flood-color` attribute defining the flood color as `seagreen`. We included two {{SVGElement("rect")}} elements with a filter attribute; this is where the filters will be displayed.

```html
<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg">
<filter id="flood1">
<feFlood flood-color="seagreen" />
</filter>
<filter id="flood2">
<feFlood flood-color="seagreen" />
</filter>

<rect id="r1" filter="url(#flood1)" />
<rect id="r2" filter="url(#flood2)" />
</svg>
```

#### CSS

We define the size and position of our `<rect>` using the CSS {{cssxref("height")}}, {{cssxref("width")}}, {{cssxref("x")}}, and {{cssxref("y")}} properties:

```css
rect {
width: 100px;
height: 100px;
x: 10px;
y: 10px;
}
#r2 {
x: 150px;
}
```

We then apply different flood color values to the `<feFlood>` elements using the CSS `flood-color` property. We use a named color and a 3-digit hexidecimal color, but we can use any valid CSS color syntax:

```css
#flood1 feFlood {
flood-color: rebeccapurple;
}
#flood2 feFlood {
flood-color: #f36;
}
```

#### Results

{{EmbedLiveSample("Defining the color of a filters flood", "300", "220")}}

The attributes defined the squares as seagreen, but these values were overridden by the CSS `flood-color` values.

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{cssxref("flood-opacity")}}
- {{cssxref("color")}}
- {{cssxref("fill")}}
- {{cssxref("lighting-color")}}
- {{cssxref("stop-color")}}
- {{cssxref("stroke")}}
- {{cssxref("box-shadow")}}
- {{cssxref("text-shadow")}}
- {{cssxref("background-color")}}
- {{cssxref("color_value", "&lt;color>")}}
- {{cssxref("filter-function")}}
- SVG {{SVGAttr("flood-color")}} attribute
136 changes: 136 additions & 0 deletions files/en-us/web/css/flood-opacity/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
---
title: flood-opacity
slug: Web/CSS/flood-opacity
page-type: css-property
browser-compat: css.properties.flood-opacity
---

{{CSSRef}}

The **`flood-opacity`** [CSS](/en-US/docs/Web/CSS) property defines the opacity of the current filter primitive subregion in {{SVGElement("feFlood")}} and {{SVGElement("feDropShadow")}} elements within a {{SVGElement("filter")}}. If present, it overrides the element's {{SVGAttr("flood-opacity")}} attribute.

The property value impacts the {{cssxref("flood-color")}}'s alpha channel; it can increase the transparency of a `flood-color` but can not make the color defined by the `flood-color` property more opaque.

> [!NOTE]
> The `flood-opacity` property only applies to {{SVGElement("feFlood")}} and {{SVGElement("feDropShadow")}} elements nested in an {{SVGElement("svg")}}. It doesn't apply to other SVG, HTML, or pseudo-elements.

## Syntax

```css
/* numeric and percentage values */
flood-opacity: 0.2;
flood-opacity: 20%;

/* Global values */
flood-opacity: inherit;
flood-opacity: initial;
flood-opacity: revert;
flood-opacity: revert-layer;
flood-opacity: unset;
```

### Values

The `<opacity-value>` is a {{cssxref("number")}} or {{cssxref("percentage")}} denoting the opacity of the SVG gradient `<flood>` element.

- {{cssxref("number")}}

- : A numeric value between `0` and `1`, inclusive.

- {{cssxref("percentage")}}

- : A percentage value between `0%` and `100%`, inclusive.

With `0` or `0%` set, the flood is fully transparent. With `1` or `100%` set, the element is the full opacity of the `flood-color` value, which may or may not be partially opaque.

## Formal definition

{{CSSInfo}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here & probably below


## Formal syntax

{{csssyntax}}

## Examples

### Defining the flood opacity of a filter

This example demonstrates the basic use case of `flood-opacity`, and how the CSS `flood-opacity` property takes precedence over the `flood-opacity` attribute.

#### HTML

We have an SVG with a few {{SVGElement("filter")}} elements, each with a {{SVGElement("feFlood")}} child. The `<feFlood>` define the filters as `seagreen`, with the first being declared by its `flood-opacity` attribute as fully opaque and the second being fully transparent. We included two {{SVGElement("rect")}} elements, each with a filter attribute.

```html
<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg">
<filter id="flood1">
<feFlood flood-color="seagreen" flood-opacity="1" />
</filter>
<filter id="flood2">
<feFlood flood-color="seagreen" flood-opacity="0" />
</filter>

<rect id="r1" filter="url(#flood1)" />
<rect id="r2" filter="url(#flood2)" />
</svg>
```

#### CSS

We define the {{cssxref("height")}}, {{cssxref("width")}}, {{cssxref("x")}}, and {{cssxref("y")}},positioning of our rectangles with CSS, and include a repeating linear gradient as a {{cssxref("background-image")}} on the SVG so the opacity of the flood-color is more apparent:

```css
svg {
background-image: repeating-linear-gradient(
45deg,
transparent 0 9px,
#ccc 0px 10px
);
}
rect {
width: 100px;
height: 100px;
x: 10px;
y: 10px;
}
#r2 {
x: 150px;
}
```

We then apply different flood opacity values to the `<feFlood>` elements using the CSS `flood-opacity`: property:

```css
#flood1 feFlood {
flood-opacity: 0.5;
}
#flood2 feFlood {
flood-opacity: 90%;
}
```

#### Results

{{EmbedLiveSample(" Defining the flood opacity of a filter", "300", "220")}}

The attributes defined the first square as fully opaque and the second as fully transparent, but these values were overridden by the CSS `flood-opacity` values. The seagreen filters are 50% and 90% opaque, respectively.

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{cssxref("flood-color")}}
- {{cssxref("fill")}}
- {{cssxref("stop-opacity")}}
- {{cssxref("stroke-opacity")}}
- {{cssxref("opacity")}}
- {{cssxref("box-shadow")}}
- {{cssxref("text-shadow")}}
- {{cssxref("filter-function")}}, including {{cssxref("filter-function/opacity", "opacity()")}}
- SVG {{SVGAttr("flood-opacity")}} attribute
Loading