NEW 127102
External SVG filter references don't work as expected
https://bugs.webkit.org/show_bug.cgi?id=127102
Summary External SVG filter references don't work as expected
Dirk Schulze
Reported 2014-01-16 05:26:52 PST
Given the following HTML file: <style> div { width: 200px; height: 200px; -webkit-filter: url(resource.svg#f); } </style> <div></div> 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"/> </filter> </svg> 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.
Attachments
Simon Fraser (smfr)
Comment 1 2018-09-02 08:38:55 PDT
Currently we don't even call loadExternalDocumentIfNeeded() for reference filters in the CSS filter code path.
Radar WebKit Bug Importer
Comment 2 2018-09-02 08:40:39 PDT
Note You need to log in before you can comment on or make changes to this bug.