使用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/