Re: filter: url() question

On Sat, 26 May 2012 17:09:14 +0200, Tab Atkins Jr. <jackalmage@gmail.com>  
wrote:

> On Fri, May 25, 2012 at 8:34 AM, Stephen White  
> <senorblanco@chromium.org> wrote:
>> A question about the url() syntax for CSS Filter Effects:  Should SVG  
>> nodes
>> in an external file referenced by url() be added to the DOM?  Ie.,  
>> should it
>> be possible to find them by ID from JavaScript?
>>
>> For example, the Firefox implementation of this feature seems to work  
>> for
>> SVG nodes contained in the same file (since they're already in the DOM  
>> at
>> load time, getElementById() works), but not for externally-referenced  
>> files.
>>  The filter is applied, but getElementById() returns NULL, even for the
>> filter node whose ID was used as the fragment identifier in the URL.
>>
>> Is this the intended behaviour?
>
> Yes, this is intended behavior. They're not included into the
> document, they're merely referenced.
>
> ~TJ

Yes, it's intended.

If you happen to have a reference like:

    filter: url(some-other-document.svg#blur)

Then at least in Opera, that triggers a load of the given resource in the  
context of the document that uses the filter. It's the same as other  
external references in CSS, like mask: url(someother.svg#mask) for  
example. The DOM of these external resource documents is not made  
available. If on the other hand the filter element is specified in the  
same document that it's used in then it becomes available in the DOM as  
expected, and you can find it with e.g getElementById.

Additionally Firefox seems to require same-origin in the filter property,  
e.g if you had filter:  
url(http://someotherdomain.com/some-document.svg#blur) then that prevents  
the filter from being applied in a document on example.com.


-- 
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed

Received on Monday, 28 May 2012 08:15:30 UTC