SVG absolute positioning

Really the answer is no, you can't. Paths are based on their location in the view, so in that sense they're ALL absolutely positioned. My honest recommendation to you is to not mess so much with SVG code, it's complex and not very human-readable. It's far easier to use a tool like InkScape to move the paths around. That way you can position them all just the way you want them and then use them in an HTML document how you wish.

To do the animations you're talking about you should look to JavaScript. There are several libraries available for just such purposes. Raphael being one.


UPDATE: I want to curb this recommendation somewhat. It's true that SVG paths can be complex and difficult to work with, for complex shapes it is best to use an editor capable of exporting to SVG, like inkscape. However, for simple graphics and animations, it's perfectly possible and quite rewarding to do so directly in code. CSS animations can now be applied directly to SVG elements, so go on! Take chances! Make mistakes! Get MESSY!


Paths don't have x/y attributes or styles as you've discovered.

You could add a transform="translate(x, y)" attribute where x, y are floats or maybe a CSS transform property.

Tags:

Html

Css

Svg