SVG filters feImage with xlink:href doesn't work with fragments

NEW
Unassigned

Status

()

Core
SVG
9 years ago
4 months ago

People

(Reporter: Hans Schmucker, Unassigned)

Tracking

(Blocks: 3 bugs, {dev-doc-needed})

Trunk
dev-doc-needed
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(status2.0 wanted)

Details

(URL)

Attachments

(1 attachment)

(Reporter)

Description

9 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1b1pre) Gecko/20080916043910 Minefield/3.1b1pre
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1b1pre) Gecko/20080916043910 Minefield/3.1b1pre

The feImage filter is supposed to support document fragments (see http://www.w3.org/TR/SVG/filters.html#feImage ), including but not limited to fragments of the current document, in practice emulating the "use" element and rendering the output to the current buffer.

Basically, this deprives SVG filters of any way to work with dynamic data, like canvas and instead forces webdevelopers to instead use very slow JS implementations of those filters. For example, to recreate the old Java "waves" demo, the canvas could be fed into an feDisplacement filter.

Reproducible: Always

Steps to Reproduce:
1. Open the attached testcase in Firefox
2. Open it again in Inkscape
Actual Results:  
Firefox doesn't display the green rectangle inserted into the rendering chain through an feImage. Output of Inkscape and Firefox differ.

Expected Results:  
The green rectangle should be added to the rendering via the feImage filter, overlaying the red background-
(Reporter)

Comment 1

9 years ago
Created attachment 339387 [details]
Testcase for feImage xlink:href document fragment bug.
(Reporter)

Updated

9 years ago
Blocks: 410761, 311029
Depends on: 390379
(Reporter)

Updated

9 years ago
Version: unspecified → Trunk

Comment 2

9 years ago
I can confirm this bug in

Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10.5; en-US; rv:1.9.0.1)
Gecko/2008070206 Firefox/3.0.1

Comment 3

9 years ago
This is really just another example of bug 272288.
Depends on: 272288

Comment 4

9 years ago
Confirming, although this is likely to simply be marked as a a duplicate of bug 272288 eventually.
Status: UNCONFIRMED → NEW
Ever confirmed: true

Updated

8 years ago

Updated

8 years ago
Blocks: 512501
To get this to work (for <feImage xlink:href="#idOfSomeElement">), I think we actually need to import the <use> behavior for into <feImage>, right? (to clone a subtree, or at least generate the document with that subtree if the targeted ID is in a different document)

We could almost fall back on moz-element here, except that the targeted element could be in a completely different document from the one we're displaying (e.g. xlink:href="foo.svg#SomeNodeID"), and IIUC, -moz-element only works for elements in the same document.  Still, we might be able to take advantage of some of moz-element's underlying mechanics.
(In reply to comment #3)
> This is really just another example of bug 272288.

I think this is actually distinct from bug 272288 (which is about <image>) -- this bug is about using fragment IDs, and the <image> tag doesn't accept those...
> Unlike ‘use’, the ‘image’ element cannot reference elements within an SVG file.
http://www.w3.org/TR/SVG/struct.html#ImageElement
...whereas the <feImage> tag does accept fragment IDs (as noted in comment 0).

Updated

7 years ago
status2.0: --- → wanted
Duplicate of this bug: 703987

Comment 8

4 years ago
It might be time for someone to work on this. Safari and Chrome(Canary) as well as IE now support importing document fragments correctly into filter streams. aka

http://codepen.io/mullany/pen/rKLdJ

Now displays correctly except in Firefox.

Updated

4 years ago
Duplicate of this bug: 882434

Comment 10

4 years ago
There will be increasing interest in blending modes since they are heavily used in the iOS7 visual style. Because of the lack of support for enable-background in every browser except IE10, the only way to achieve these effects in SVG is to use document fragments via feImage. And Firefox is now the only browser that doesn't support these.
Comment hidden (me-too)
Comment hidden (obsolete)
Do the other browsers handle dynamic changes to the referenced content updating the filter? What do they do if the referenced content itself uses the filter? Do they handle <foreignObject> content inside the referenced content subtree?
I think I would implement this in a way similar to the way -moz-element is implemented. nsImageRenderer in nsCSSRendering implements that.
Comment hidden (off-topic)

Comment 16

3 years ago
Other use cases for feImage fragments: 

If you want to do a linear focus blur on text then you need to be able to get a gradient into your filter chain in some way.

If you want to do distortion effects on text then it's handy to import linear and radial gradients as displacement inputs. 

Other browsers update the in-filter feImage when the referenced object is updated. Erik Dahlstrom's ripple distortion effect is a good demo: 

http://svg-wow.org/filterEffects/ripple.svg
Keywords: dev-doc-needed
Comment hidden (off-topic)
Comment hidden (obsolete)
Comment hidden (obsolete)

Updated

2 years ago
Duplicate of this bug: 1215575
Blocks: 1262352

Updated

10 months ago
No longer blocks: 410761
You need to log in before you can comment on or make changes to this bug.