SVG absolute positioning

Question

I am for the first time playing with SVG.

I want to do some silly animations in my SVG, but I am having some trouble

Here is a snippet of my code: http://codepen.io/timbo27/pen/kAKJi

<div id="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<g>
    <path class="logo-start" d="M59.1,66.6c0.2,0.2,0.4,0.3,0.4,0.6c0,0.3-0.3,0.7-0.6,0.7c-0.2,0-0.4-0.1-0.5-0.2l-4.9-3.3c-0.3-0.2-0.4-0.3-0.4-0.6
        c0-0.3,0.2-0.5,0.4-0.6l4.9-3.3c0.1-0.1,0.3-0.2,0.5-0.2c0.3,0,0.6,0.3,0.6,0.6c0,0.3-0.2,0.5-0.4,0.6l-4.3,2.8L59.1,66.6z"/>
    ......
    <path class="logo-stop" d="M161.4,63.7l-4.3-2.8c-0.2-0.2-0.4-0.3-0.4-0.6c0-0.3,0.3-0.6,0.6-0.6c0.2,0,0.3,0.1,0.5,0.2l4.9,3.3
        c0.3,0.2,0.5,0.3,0.4,0.6c0,0.3-0.2,0.5-0.4,0.6l-4.9,3.3c-0.1,0.1-0.3,0.2-0.5,0.2c-0.3,0-0.6-0.3-0.6-0.7c0-0.3,0.2-0.5,0.4-0.6
        L161.4,63.7z"/>
</g>
</svg>
</div>

Thus, I have an SVG logo (simple text)

I have given each path a class and have done some minimal styling on a few of the paths.

I would like to have the ability to absolutely position some of the paths.

Is this possible?

Answer 1

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.

Answer 2

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!