Bug 104169

Summary:

Data URI SVG Fills/Filters

Product:

WebKit

Reporter:

Joey Hoer <me>

Component:

SVG

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

bfulgham, c.laborier, gwynne, lecaignec.quentin, maggotfish, sabouhallawa, tigt, webkit-bug-importer, zimmermann

Priority:

Keywords:

InRadar

Version:

528+ (Nightly build)

Hardware:

All

OS:

All

URL:

http://xn--dahlstrm-t4a.net/svg/paint/datauri-gradient.svg

Attachments:

Description	Flags
css-filter-svg-element.html	none

Joey Hoer

Reported 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.

Attachments
css-filter-svg-element.html (182 bytes, text/html) 2022-12-08 13:13 PST, Said Abou-Hallawa	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Taylor Hunt

Comment 1 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.

Chris

Comment 2 2021-05-22 03:18:45 PDT

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

Comment 3 2022-07-15 15:46:33 PDT

Firefox handles this correctly. Safari and Chrome do not.

Radar WebKit Bug Importer

Comment 4 2022-07-15 15:47:36 PDT

<rdar://problem/97098436>

Quentin LE CAIGNEC

Comment 5 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.

Said Abou-Hallawa

Comment 6 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.

Note You need to log in before you can comment on or make changes to this bug.