Positioning SVG elements using CSS

Question

Assume the following svg document:

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <text x="20" y="20">My text</text> </svg> 

Now what i want to do is reposition this text using css.

I have tried adding style="dx:20" and style="transform: translate(20)". Both have no effect in firefox and safari. Adding these as normal attributes works fine but then i can't split the positioning from the actual code. Setting x, y, left and top in the style isn't working either.

Is there a way to position an svg element using css?

Answer 1

I've managed to move some SVG text in chrome using the following CSS:

text.identity{ transform: translate(74px,0px); -ms-transform: translate(74px,0px); /* IE 9 */ -webkit-transform: translate(74px,0px); /* Safari and Chrome */ -o-transform: translate(74px,0px); /* Opera */ -moz-transform: translate(74px,0px); /* Firefox */ } 

However, it's not budging in Firefox...

Answer 2

I came here looking for a fix but fixed the issue myself, thought I would share:

transform: translate(100px, 100px) 

Appears to work in all modern browsers except for Internet Explorer, right up until Microsoft Edge (which isn't even out yet) which is quite disappointing. The elements I've tested on are:

<path> <polygon> <g> 

The only issue I've had is with <text> elements, and the solution there is to wrap the <text> in a <g> and apply the transformation to that. That should also work for any elements I haven't yet tested that have issues with transform: translate().

I haven't found a decent fallback for Internet Explorer, instead I've made sure that the transforms aren't vital to the function of the SVG.