WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
NEW
Bug 211617
CSS filter property does not work with inlined SVG
https://bugs.webkit.org/show_bug.cgi?id=211617
Summary
CSS filter property does not work with inlined SVG
naktinis
Reported
2020-05-08 02:03:30 PDT
Created
attachment 398842
[details]
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
Attachments
Rendering examples
(259.79 KB, image/png)
2020-05-08 02:03 PDT
,
naktinis
no flags
Details
View All
Add attachment
proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1
2020-05-08 15:46:10 PDT
<
rdar://problem/63039570
>
Simon Fraser (smfr)
Comment 2
2020-05-11 16:59:32 PDT
Probably RenderSVGInline::requiresLayer() const final { return false; }
naktinis
Comment 3
2020-09-17 10:40:53 PDT
Simon Fraser, do you think this could be an easy fix?
Ahmad Saleem
Comment 4
2022-08-07 05:58:24 PDT
I am able to reproduce this bug in Safari 15.6 on macOS 12.5 using attached test case and it does show these difference compared to other browsers: Desaturate, encoded as base64 ----> RED Desaturate, encoded with "escape()" ----> RED Turn white to green, encoded with "escape()" ---> Missing completely. Just wanted to update latest testing results. Thanks!
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug