I am working with SVG elements using snapSVG and I noticed that transformation in chrome and firefox doesn’t work as it should. The code perfectly works with chrome but not with firefox.
I am trying to rotate an image with a overlaying mask for which the image is rotated in some degree clockwise for which the mask rotates some degrees in counter clockwise. The following generates a transformation matrix that works perfectly in Chrome but not in firefox.
var imageCenterX = imageObj.posx+imageObj.width/2;
var imageCenterY = imageObj.posy+imageObj.height/2;
var transformString = "r"+imageObj.rotate+","+imageCenterX+","+imageCenterY;
var transformStringMask = "r-"+imageObj.rotate+","+imageCenterX+","+imageCenterY;
image.transform(transformString);
mask.transform(transformStringMask);
In chrome:
Image html:
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="imgSrc.jpeg" preserveAspectRatio="none" x="211" y="74.191" width="480" height="480" mask="url('#Si9xqb7h9ys')" id="image1" transform="matrix(0.7071,-0.7071,0.7071,0.7071,-90.0717,410.9296)"></image>
Mask html:
<mask id="Si9xqb7h9ys"><g transform="matrix(0.7071,0.7071,-0.7071,0.7071,354.2614,-226.8807)"><rect x="211" y="74.191" width="298" height="480" fill="#ffffff" stroke="#000000"></rect></g></mask>
In firefox:
Image html:
<image transform="matrix(0.7071,0.7071,-0.7071,0.7071,414.2614,-251.7336)" id="image1" mask="url('#Si9xrhyed2z')" style="" height="600" width="600" y="74.191" x="211" preserveAspectRatio="none" xlink:href="imgSrc.jpeg"></image>
Mask html:
<mask id="Si9xqofuf2z"><g><rect stroke="#000000" fill="#ffffff" style="" height="480" width="298" y="74.191" x="211"></rect></g></mask>
What I saw was that the mask object doesn’t even get a transform attribute.
Why is this happening and is there any work around for this issue?
Source: cross-browser
