Bug 127102 - External SVG filter references don't work as expected
Summary: External SVG filter references don't work as expected
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Blocks: 68469
  Show dependency treegraph
Reported: 2014-01-16 05:26 PST by Dirk Schulze
Modified: 2018-09-02 08:40 PDT (History)
6 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Dirk Schulze 2014-01-16 05:26:52 PST
Given the following HTML file:

div {
	width: 200px;
	height: 200px;
	-webkit-filter: url(resource.svg#f);

resource.svg looks like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
	<filter id="f">
	<feFlood flood-color="green"/>

The div box in the HTML file will not get filtered.

Replace <feFlood> with <feColorMatrix> and it will work just fine. The reason is probably the following:

We download the SVG file as expected and store the reference to the created SVG document. We have a proper pending resource management. The style resolving process can access the SVG document and more important the SVG fe-primitives just fine.

However, feFlood needs a RenderObject, feColorMatrix doesn't. This is mainly because feFlood has flood-color and flood-opacity: two CSS properties. feColorMatrix doesn't depend on CSS properties and we can get all information from the DOM.

It means, we never create a render tree for the external SVG file. It might even be that the problem existed the whole time. That might explain why certain external SVG filter examples never worked in Safari or Chrome.

We need to create a Render tree for the external SVG filters. Or find a way to have style resolving (with proper updating) without the help of RenderObject.
Comment 1 Simon Fraser (smfr) 2018-09-02 08:38:55 PDT
Currently we don't even call loadExternalDocumentIfNeeded() for reference filters in the CSS filter code path.
Comment 2 Radar WebKit Bug Importer 2018-09-02 08:40:39 PDT