Question

我听说从第41版本的firefox转换 - 来自css应该可以正常使用svg，但我今天遇到了问题。

这就是我所做的：

使用snap.svg

在我的svg中创建多边形

var fdr = Snap('#fdright');
var fdh1 = fdr.polygon(185.551,171.956, 127.89,138.705, 127.89,72.203, 185.551,38.953, 243.212,72.203, 243.212,138.705).attr({fill:'#847b63'}).addClass('mixer');
var fdh2 = fdr.polygon(230.167,184.957, 214.77,176.079, 214.77,158.321, 230.167,149.443, 245.563,158.321, 245.563,176.079).attr({fill:'#bce06e', opacity:'0.9'}).addClass('ochange');
var fdh3 = fdr.polygon(251.981,208.411, 237.767,216.627, 223.561,208.425, 223.57,192.006, 237.785,183.79, 251.99,191.992).attr({fill:'#bce06e', opacity:'0.7'}).addClass('ochange');
var fdh4 = fdr.polygon(126.443,155.101, 107.259,166.191, 88.087,155.121, 88.098,132.962, 107.283,121.873, 126.455,132.943).attr({fill:'#bce06e', opacity:'0.6'}).addClass('ochange');

这里我的多边形有一个名为“ochange”的类

然后这个CSS：

.ochange{
transform:scale(1);
transition-duration:0.3s;
transform-origin:50% 50%;
}
.ochange:hover{
transform:scale(0.7);
}

在Chrome中，它完美无缺，当我悬停多边形时，它会从自己的中心缩小。但是在firefox中，缩放的起源是svg空间，使得所有多边形从它们所在的容器的中心开始缩放。

有没有人知道如何解决这个错误？如果可能的话，我想避免移动我的所有多边形（实际上我有超过30个）。是否有一个简单的解决方案，不涉及对每个多边形进行更改？

Firefox转换子元素svg

0 个答案: