javascript - 使用 CSS 编辑生成的 SVG 属性在 Firefox 中有效，但在 Chrome 中无效

Question

我使用的 API 可根据我的 map 自动生成图例，但图例格式不正确。我发现创建的 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。变换矩阵方法起作用了，我只是不知道。