Snap SVG rotate doesn’t work same in chrome and firefox

May 21, 2015 0 Comments

cross-browser

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

Leave a Reply