Skip to content

Instantly share code, notes, and snippets.

@flaki
Created September 30, 2015 10:06
Show Gist options
  • Save flaki/c1955e29ae58dcedf14e to your computer and use it in GitHub Desktop.
Save flaki/c1955e29ae58dcedf14e to your computer and use it in GitHub Desktop.
SVG Filter removing the red channel
body {
background:black;
}
p.target {
color: white;
margin: 0;
display: inline-block;
width: 16em;
}
p.target span {
color: red;
}
p.target:hover{
filter:url(#nored);
}
<p class="target" xmlns="http://www.w3.org/1999/xhtml" style="color: white;">
Lorem ipsum dolor sit amet, <span>consectetur adipisicing elit, sed do eiusmod</span> tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<!-- http://www.w3.org/TR/SVG/filters.html#feColorMatrixElement -->
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" height="0">
<svg:filter id="nored">
<svg:feColorMatrix style="color-interpolation-filters:sRGB" values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0"/>
</svg:filter>
</svg:svg>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment