使用CSS编辑生成的SVG属性可在Firefox中运行，但不能在Chrome中运行

Question

我使用的API会根据我的地图自动生成图例，但是图例的格式不正确。 我发现创建的SVG返回一个transform：matrix值

转换：矩阵（1.00000000,0.00000000,0.00000000,1.00000000,62.50000000,62.50000000）

但是我想要返回的值是

转换：矩阵（1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000）

通过将其用作CSS，我设法使它在Firefox中工作

.esriLegendLayer svg :nth-child(2){
display: inline-block;
overflow: hidden;
background: white;
max-height: 30px;
max-width: 30px;
-webkit-transform: matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000) !important;
-moz-transform: matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000) !important;
-o-transform: matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000) !important;
transform: matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000) !important;
}

创建SVG时，它会强制进行以下转换：将矩阵值转换为CSS中列出的值。 但是，当我在Chrome中尝试时，它会完全忽略CSS并坚持使用默认设置

转换：矩阵（1.00000000,0.00000000,0.00000000,1.00000000,62.50000000,62.50000000）

如何在Chrome中使用它？

Answer 1

谢谢，但是我很快发现解决方案是在chrome中，还有一个需要样式化的div元素以及SVG。 我只是不知道转换矩阵方法的工作原理。

Answer 2

Firefox转换错误，最后两位必须以px为单位。 对于chrome，请使用以下转换：matrix（0.9，-0.05，-0.375，1.375，220，20）; transform-origin：0 0;

这是有关更多信息的问题， http： //www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/