Skip to content

Commit eda4e09

Browse files
estelledipikabhgithub-actions[bot]
authored
CSS invert function (#41147)
* CSS invert function * Update files/en-us/web/css/filter-function/invert/index.md Co-authored-by: Dipika Bhattacharya <[email protected]> * Update files/en-us/web/css/filter-function/invert/index.md Co-authored-by: Dipika Bhattacharya <[email protected]> * Update files/en-us/web/css/filter-function/invert/index.md Co-authored-by: Dipika Bhattacharya <[email protected]> * Update files/en-us/web/css/filter-function/invert/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/filter-function/invert/index.md Co-authored-by: Dipika Bhattacharya <[email protected]> --------- Co-authored-by: Dipika Bhattacharya <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent ad57cae commit eda4e09

File tree

1 file changed

+110
-9
lines changed
  • files/en-us/web/css/filter-function/invert

1 file changed

+110
-9
lines changed

‎files/en-us/web/css/filter-function/invert/index.md‎

Lines changed: 110 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -43,31 +43,132 @@ filter: invert(1);
4343
## Syntax
4444

4545
```css
46-
invert(amount)
46+
/* No inversion */
47+
invert(0)
48+
49+
/* Complete inversion */
50+
invert()
51+
invert(1)
52+
invert(100%)
53+
54+
/* 60% inversion */
55+
invert(.6)
56+
invert(60%)
4757
```
4858

4959
### Parameters
5060

51-
- `amount` {{Optional_Inline}}
52-
- : The amount of the conversion, specified as a {{cssxref("&lt;number&gt;")}} or a {{cssxref("&lt;percentage&gt;")}}. A value of `100%` is completely inverted, while a value of `0%` leaves the input unchanged. Values between `0%` and `100%` are linear multipliers on the effect. The initial value for {{Glossary("interpolation")}} is `0`. The default value is `1`.
61+
- {{cssxref("&lt;number&gt;")}} or {{cssxref("&lt;percentage&gt;")}} {{Optional_Inline}}
62+
- : Specifies the amount of the conversion. A value of `100%` is completely inverted, while a value of `0%` leaves the input unchanged. Values between `0%` and `100%` are linear multipliers on the effect. The initial value for {{Glossary("interpolation")}} is `0`. The default value is `1`.
5363

5464
## Formal syntax
5565

5666
{{CSSSyntax}}
5767

68+
## SVG filter
69+
70+
The SVG {{SVGElement("feComponentTransfer")}} filter element can also be used to invert content by creating equivalent inversion on nested {{SVGElement("feFuncR")}}, {{SVGElement("feFuncG")}}, and {{SVGElement("feFuncB")}} table elements. We set the same `tableValue` for the red, green, and blue filter primitives to the same value, then we can reference the SVG effect by the ID of the {{SVGElement("filter")}}:
71+
72+
```html
73+
<svg role="none">
74+
<filter id="invert90">
75+
<feComponentTransfer>
76+
<feFuncR type="table" tableValues="0.1 0" />
77+
<feFuncG type="table" tableValues="0.1 0" />
78+
<feFuncB type="table" tableValues="0.1 0" />
79+
</feComponentTransfer>
80+
</filter>
81+
</svg>
82+
```
83+
84+
The following declarations produce the same effect:
85+
86+
```css
87+
filter: invert(0.9);
88+
filter: invert(90%);
89+
filter: url("#invert90"); /* with embedded SVG */
90+
filter: url("fileName.svg#invert90"); /* external SVG */
91+
```
92+
5893
## Examples
5994

60-
### Examples of correct values for invert()
95+
This example shows three images for comparison: an image with an `invert()` filter function applied, an image with the equivalent SVG function applied, and the original image:
96+
97+
### SVG
98+
99+
We create an SVG filter that inverts the content on which it is applied by 70%:
100+
101+
```html
102+
<svg height="0">
103+
<filter id="invert">
104+
<feComponentTransfer>
105+
<feFuncR type="table" tableValues="0.3 0" />
106+
<feFuncG type="table" tableValues="0.3 0" />
107+
<feFuncB type="table" tableValues="0.3 0" />
108+
</feComponentTransfer>
109+
</filter>
110+
</svg>
111+
```
112+
113+
### CSS
114+
115+
We include CSS that will invert elements based on their `filter` or `svgFilter` class:
61116

62117
```css
63-
invert(0) /* No effect */
64-
invert(.6) /* 60% inversion */
118+
.filter {
119+
filter: invert(70%);
120+
}
65121

66-
invert() /* Completely inverted */
67-
invert(1)
68-
invert(100%)
122+
.svgFilter {
123+
filter: url("#invert");
124+
}
69125
```
70126

127+
```html hidden
128+
<table cellpadding="5">
129+
<thead>
130+
<tr>
131+
<th><code>invert()</code> filter</th>
132+
<th>SVG filter equivalent</th>
133+
<th>Original image</th>
134+
</tr>
135+
</thead>
136+
<tbody>
137+
<tr>
138+
<td>
139+
<img
140+
class="svgFilter"
141+
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
142+
alt="Pride flag" />
143+
</td>
144+
<td>
145+
<svg id="svg" height="220" width="220" overflow="visible">
146+
<filter id="svgInvert">
147+
<feComponentTransfer>
148+
<feFuncR type="table" tableValues="0.3 0"/>
149+
<feFuncG type="table" tableValues="0.3 0"/>
150+
<feFuncB type="table" tableValues="0.3 0"/>
151+
</feComponentTransfer>
152+
</filter>
153+
</filter>
154+
<image
155+
href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
156+
xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
157+
filter="url('#svgInvert')" />
158+
</svg>
159+
</td>
160+
<td>
161+
<img
162+
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
163+
alt="Pride flag" />
164+
</td>
165+
</tr>
166+
</tbody>
167+
</table>
168+
```
169+
170+
{{EmbedLiveSample('examples','100%','280')}}
171+
71172
## Specifications
72173

73174
{{Specifications}}

0 commit comments

Comments
 (0)