Why don’t CSS filters work on SVG elements in Chrome?

by

All credit to @Robert Longson, who gave the answer: CSS filters can not be applied to SVG elements in Chrome. They can, however, be re-implemented as SVG filters, with some extra work. This is what I ended up with:

rect{
  fill:red;
}
rect:hover{
    filter:url("#sepia");
    filter:sepia(100%);
}
    <svg width="100" height="50">
      <defs>
        <filter id="sepia">
          <feColorMatrix type="matrix" values="0.30 0.30 0.30 0.0 0
                                               0.25 0.25 0.25 0.0 0
                                               0.20 0.20 0.20 0.0 0
                                               0.00 0.00 0.00 1 0"/>
        </filter>
      </defs>
      <rect x="0" y="0" width="100" height="50"/>
    </svg>

Firefox will now use the CSS filter, and Chrome the SVG filter. Of course, if you manage to make the SVG filter work the way you want, you could just stick with that. For me, I never managed to get exactly the effect I wanted, so I let Firefox use the better looking CSS filter.

Bug tracker for CSS filters on SVG elements in Chrome/ium: https://bugs.chromium.org/p/chromium/issues/detail?id=109224

Edit February 2021: CSS filters on SVG elements will start working in Chrome 89, if everything goes according to plan!

Edit 2023: CSS filters on SVG elements work in Chrome now.

More Related Contents:

  1. img src SVG changing the styles with CSS
  2. Invert rounded corner in CSS?
  3. Background color of text in SVG
  4. Transparent hollow or cut out circle
  5. How to resize the ClipPath area of SVG?
  6. Inline SVG in CSS
  7. SVG animation is not working on IE11
  8. CSS transparent curved shape with two rounded sides
  9. SVG USE element and :hover style
  10. How to animate handwriting text on the web page using SVG?
  11. Wave (or shape?) with border on CSS3
  12. How to create a curve on the top of a background?
  13. Specify an SVG as a background image and ALSO style the SVG in CSS?
  14. Outlining and partially filling an SVG Shape
  15. How do I center an SVG in a div?
  16. Can I change the fill color of an svg path with CSS?
  17. SVG gradient using CSS
  18. SVG in img element proportions not respected in ie9
  19. Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
  20. CSS: Using raw svg in the URL parameter of a background-image in IE
  21. How do I include a font awesome icon in my svg?
  22. How can I change the color of an ‘svg’ element?
  23. How to add animated gradient to an svg path?
  24. Filling water animation
  25. CSS change d property of
  26. Fill only Half a star with SVG
  27. SVG Fill not being applied in FireFox
  28. Using SVG as background image
  29. Tint image using CSS without overlay
  30. Why is filter(drop-shadow) causing my SVG to disappear in Safari?

Leave a Comment