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"&gt;
<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

At the moment, it seems -according to Shelley Powers, in her A List Apart Article "Using SVG for Flexible, Scalable and Fun Backgrounds: Part I" and "Part II"- that CSS is not currently best-suited to positioning of SVG. In fact it seems to be quite a minefield to incorporate SVG into a web-page, without directly embedding it within the html itself.

I hope that there are solutions to be found, and, indeed, Powers does offer a couple of workarounds, to enable proper separation of style and content for SVG. I'd hazard a guess that the current problems are the relative new-ness of the concept/standard (relative to, for example, .gif or even .png...), sadly.

I'm sorry I can't offer a better answer. =/

Answer 2

I warn you i'm a relative beginner but what about "x" and "y" and assigning these with number and "px"

maybe: left: 290px; top: 1200px; or x:30px; y:50px; and text-anchor:start;

Sample: Position ze text