image in pattern in path in SVG in Mozilla Firefox?

Question

I have the beginnings of a jigsaw demo in SVG that works in Opera, Chrome, and Safari, but not Firefox: the background rect shows, but the pieces are all entirely missing.

The pieces consist of a path element whose fill property references a pattern that in turn contains a copy of the image translated so that the correct part of the image falls under the path‘s clip. These pieces are generated by JavaScript code.

I have occasionally had a failure mode where the image fails to appear—but in that case, the stroke of the path should be visible. On Firefox I do not even see the stroke.

I’d be interested if anyone can tell me whether

1. I have misread the SVG specs and what I am doing should not work at all—Opera, Chrome, and Safari were just being kind; or

2. Firefox has a well-known patterns-containing-images bug that has a simple workaround.

This is my third attempt at getting an image to work as the background for an irregularly-shaped puzzle piece: filters do not work because they do not seem to have a way to translate the image they refer to, and just placing an image with clipPath does not work because dragging an image in Safari attempts to drag the image file on to the desktop, whch interferes with dragging pieces around the puzzle!

Answer 1

First quick observation: as you know, SVG is XML so you're ending script tag is wrong. Remove the

</script>

especially since you already self closed that element.

Answer 2

O happy day! I have made it work on Firefox with a tiny change to the JavaScript!

The image, symbol, and pattern were all red herrings. The problem was the path data. The old version looked like this:

M0,0 h250 v120,q0,20 -20,20,t-20,-20,-20,-20,-20,100,20,100,20,-20,20,-20,20,20,v120 h-250 v-400 z

The new version looks like this

M0,0 h250 v120 q0,20 -20,20 t-20,-20 -20,-20 -20,100 20,100 20,-20 20,-20 20,20 v120 h-250 v-400 z

A mistake in the JavaScript code was using commas to separate some of the commands instead of spaces. I think in this case Firefox was correct and the other browsers overly merciful, but to make sure would require a more careful rereading of the spec than I am in the mood for right now. :-)