Question

我正在使用snapSVG处理SVG元素，我注意到chrome和firefox中的转换不能正常工作。该代码完美适用于chrome但不适用于Firefox。

我正在尝试旋转带有重叠蒙版的图像，图像以顺时针方向旋转一定程度，使面具逆时针旋转一定角度。以下内容生成的转换矩阵在Chrome中完美运行，但在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);

在Chrome中

图片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>

掩码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>

在Firefox中：

图片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>

掩码html：

<mask id="Si9xqofuf2z"><g><rect stroke="#000000" fill="#ffffff" style="" height="480" width="298" y="74.191" x="211"></rect></g></mask>

我看到的是，mask对象甚至没有获得transform属性。

为什么会发生这种情况，是否有解决此问题的方法？

Snap SVG旋转在chrome和firefox中不起作用

0 个答案: