10

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?

Improve this question
1
  • 1
    have you considered using Raphael JS library and creating your shapes/paths within a canvas element? you can position using x/y coordinates and animate also
    – b_dubb
    Commented Aug 21, 2014 at 19:43

2 Answers 2

Reset to default
11

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.

Improve this answer
0
7
+25

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!

Improve this answer
1
  • 2
    To add to your inkscape recommendation: The program offers "save as Plain SVG", and "File -> clean up document". Both options help tremendously to cut out metadata and format the SVG in a very human-readable way. I usually switch between a text-editor and inkscape when designing a logo or picture for a website: both have their merits. Note: cleaning up SVG files cuts out potentially useful data as well, like comments, color palettes and editor settings — so it's best to keep originals as well.
    – okdewit
    Commented Apr 23, 2015 at 21:32

Not the answer you're looking for? Browse other questions tagged or ask your own question.