765031 - Issue creating an SVG element at run time, loading an image within an <image> element and being masked by a <mask> element.

Status: RESOLVED WORKSFORME

(Core :: SVG, defect)

Description

[jivory]

User Agent: Mozilla/5.0 (Windows NT 6.1; rv:13.0) Gecko/20100101 Firefox/13.0
Build ID: 20120601045813

Steps to reproduce:

I was using Javascript to build an SVG element with the structure of
<svg>
  <mask id="myMask">
    <g />
  </mask>
  <image mask="url(#myMask)" />
</svg>


Actual results:

At run time, FF would throw a strange error (I forget the exact one), but the SVG would be created, image loaded, and masked in Chrome, IE9 and Safari. This error would cause the script to fail and SVG not rendered.


Expected results:

The SVG should have been created, image loaded and masked.

To resolve the issue, I create the svg without the mask:
<svg>
  <g />
  <image />
</svg>

And after the image has been fully loaded, I then wrap the <g /> tag with the <mask> and it works fine. Other browsers do not require this to work.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Can you attach the exact script you were using?  Or at least say what the error was?  Because so far, there isn't much to go on in this bug, unfortunately.

Comment 2

[Robert Longson [:longsonr]]

Attachment: my attempt

This works for me in firefox 13. Is it what you did?

Comment 3

[jivory]

It was a while back, I've since just compensated and changed my code as a workaround. I'll try to replicate it again and post the error I was given.

Comment 4

[Boris Zbarsky [:bzbarsky]]

Post the code too, please?  As things stand, there's really nothing we can do here...

Comment 5

[Robert Longson [:longsonr]]

Feel free to reopen if you produce a testcase.