[Webkit-unassigned] [Bug 211617] New: CSS filter property does not work with inlined SVG

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=211617

            Bug ID: 211617
           Summary: CSS filter property does not work with inlined SVG
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Macintosh
                OS: macOS 10.15
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: naktinis at gmail.com

Created attachment 398842

  --> https://bugs.webkit.org/attachment.cgi?id=398842&action=review

Rendering examples

It is possible to use:

filter: url(#svg-filter-desaturate);

but not:

filter: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cfilter%20id%3D%22desaturate%22%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3C/svg%3E#desaturate);
}

The use case this would enable is to define filters inside CSS stylesheets. This would give developers access to a very powerful filter system they wouldn't have otherwise. For example, you could "colorize" with feColorMatrix.

Works on Firefox 76 and Chrome 81.

Here's a full example:
https://codepen.io/foobarquux/pen/JjddKZw

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20200508/ca71bac0/attachment-0001.htm>