Bug 104169 - Data URI SVG Fills/Filters
Summary: Data URI SVG Fills/Filters
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL: http://xn--dahlstrm-t4a.net/svg/paint...
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2012-12-05 13:58 PST by Joey Hoer
Modified: 2023-09-19 11:32 PDT (History)
8 users (show)

See Also:


Attachments
css-filter-svg-element.html (182 bytes, text/html)
2022-12-08 13:13 PST, Said Abou-Hallawa
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Joey Hoer 2012-12-05 13:58:37 PST
As per http://stackoverflow.com/questions/10798397/how-may-i-use-inline-svg-gradient-on-an-element-like-line and the example above, SVG Fills/Filters declared as Data URIs are nonfunctional.

Should work inline, internally and externally via CSS.
Comment 1 Taylor Hunt 2019-04-12 06:29:38 PDT
This bit me recently trying to replicate ::-moz-range-progress (long story). 

Here’s another reduced test case for filters via data URIs specifically: https://s.codepen.io/tigt/debug/1c301f6c919e6c5aac2b0934585c747c

Two green squares should be visible, but in Safari only one is.
Comment 3 Brent Fulgham 2022-07-15 15:46:33 PDT
Firefox handles this correctly. Safari and Chrome do not.
Comment 4 Radar WebKit Bug Importer 2022-07-15 15:47:36 PDT
<rdar://problem/97098436>
Comment 5 Quentin LE CAIGNEC 2022-12-08 03:06:38 PST
Same error here, an SVG filter as url("data:...") does not work on webkit. Webkit is the only browser on which this doesn't work, which is a shame given how useful this method is.
Comment 6 Said Abou-Hallawa 2022-12-08 13:13:35 PST
Created attachment 463947 [details]
css-filter-svg-element.html

All CSS filters, including the referenced SVG filters, are not working on SVG elements. Attaching a simple test case.

This test case works if LBSE is enabled.