Example here: http://codepen.io/jmarkevicius/pen/vOKQEO
Open in Firefox to see image stretched (undesired effect)
Open in Chrome to see image sliced (desired effect)
I read ‘Crop to fit an svg pattern’: http://stackoverflow.com/questions/22883994/crop-to-fit-an-svg-pattern, which was close to solving the problem. Their solution: http://fiddle.jshell.net/xhh7a/1/
It appeared to work only on ‘circle’s #2 and #3.
When I applied my ‘path’, image got stretched again.
They mention a Firefox bug, but it is marked as ‘fixed’: https://bugzilla.mozilla.org/show_bug.cgi?id=1047973
How can I get my image sliced across browsers?