Bug 104169 – Data URI SVG Fills/Filters

• Status: NEW
• Component: SVG

[Joey Hoer]

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.

[Taylor Hunt]

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.

[Chris]

Same problem for me describe here (description + showcase) : 

https://stackoverflow.com/questions/67634831/css-filter-property-does-not-work-on-safari-when-using-inline-svg-in-css-like?noredirect=1#comment119571142_67634831

[Brent Fulgham]

Firefox handles this correctly. Safari and Chrome do not.

[Radar WebKit Bug Importer]

<rdar://problem/97098436>

[Quentin LE CAIGNEC]

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.

[Said Abou-Hallawa]

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.