SVG and CSS transform

[NtuFlorimond]

Hello,

I have noticed that only ONE transform is taken into account when trying to "chain" them with class.
SVG example :
<text class="line_2 column_4">no existing document </text>
With CSS like :

.line_2 {
transform: translate(0,690px);
-ms-transform: translate(0,690px); /* IE 9 */
-webkit-transform: translate(0,690px); /* Safari and Chrome */
-o-transform: translate(0,690px); /* Opera */
-moz-transform: translate(0,690px); /* Firefox */
}
.column_4 {
transform: translate(120px,0);
-ms-transform: translate(120px,0); /* IE 9 */
-webkit-transform: translate(120px,0); /* Safari and Chrome */
-o-transform: translate(120px,0); /* Opera */
-moz-transform: translate(120px,0); /* Firefox */
}

Any way to improve this ?

[BigBadaboom]

That's not the way CSS works. Properties are not additive like that. You might consider doing something like:

<g class="line_2">
  <text class="column_4">no existing document </text>
</g>

[dstorey]

Closing this as doesn't require SVG changes