Question

我正在使用基于我的地图自动生成图例的API，但图例格式不正确。我发现创建的SVG返回一个转换：矩阵值

变换：矩阵（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。而对于铬使用这个变换：矩阵（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/

使用CSS编辑生成的SVG属性适用于Firefox但不适用于Chrome

2 个答案: