CODEWITHSUNDEEP
javascripthtmlcsssvg
Farris Ismati
Farris Ismati

Reputation: 206

Editing generated SVG properties with CSS works in Firefox but not Chrome

I'm using an API that automatically generates a legend based on my map however the legend doesn't format properly. I found out that the SVG that gets created returns a transform :matrix value of

transform: matrix(1.00000000,0.00000000,0.00000000,1.00000000,62.50000000,62.50000000)

But what I want is it to return a value of

transform: matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000)

I managed to get this to work in Firefox by using this as my CSS

.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;
}

When the SVG gets created it forces it's transform: matrix value to the one listed in my CSS. However when I try it in Chrome it completely ignores the CSS and sticks with the default

transform: matrix(1.00000000,0.00000000,0.00000000,1.00000000,62.50000000,62.50000000)

How can I get this to work in chrome?

Upvotes: 2

Views: 44

Answers (2)

Farris Ismati
Farris Ismati

Reputation: 206

Thanks but I quickly found the solution was that in chrome there was an additional div element that needed to be styled as well as the SVG. The transform matrix method worked I just wasn't aware.

Upvotes: 2

Vinayk93
Vinayk93

Reputation: 355

Firefox transform is wrong last two digit must be in px. And for chrome use this transform: matrix(0.9, -0.05, -0.375, 1.375, 220, 20); transform-origin: 0 0;

Here is the lunk for more info http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

Upvotes: 1

Related Questions