Skip to content

Changes example in CSS invert() to use appropriate classes. #43581

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

Open
elooly10 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Changes example in CSS invert() to use appropriate classes. #43581

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1f4fb6d
Fix error where both items in table comparing css invert and svg inve…
elooly10 Mar 26, 2026
ecda5c3
Fix formatting for svgFilter tag in example
elooly10 Mar 26, 2026
b4c9236
Format files/en-us/web/css/reference/values/filter-function/invert/in…
elooly10 Mar 26, 2026
7ea6331
Fixes error in invert() preventing SVG sample image from loading
elooly10 Mar 26, 2026
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
19 changes: 5 additions & 14 deletions files/en-us/web/css/reference/values/filter-function/invert/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,24 +144,15 @@ td {
<tr>
<td>
<img
class="svgFilter"
class="filter"
Copy link
Copy Markdown
Contributor

@chrisdavidmills chrisdavidmills Mar 26, 2026

Choose a reason for hiding this comment

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

This is the only change that is needed to make the fix that you've proposed. The other changes below have broken the SVG equivalent version — it no longer displays properly.

src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
</td>
<td>
<svg id="svg" height="220" width="220" overflow="visible">
<filter id="svgInvert">
<feComponentTransfer>
<feFuncR type="table" tableValues="0.3 0" />
<feFuncG type="table" tableValues="0.3 0" />
<feFuncB type="table" tableValues="0.3 0" />
</feComponentTransfer>
</filter>
<image
href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
filter="url('#svgInvert')" />
</svg>
<img
class="svgFilter"
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
</td>
<td>
<img
Expand Down
Loading