How to make letters in SVG to be animatable individually?


Tags: javascript,html,css,svg

Problem :

I have a logo that needs to be animated, most of the logo consists of shapes which of course I can draw in illustrator but then at the bottom of the logo there is the following text:

logo text

In a graphic text editor if I go ahead and type those letters, I get something like:

<text id="XMLID_1_" transform="matrix(1 0 0 1 417 293)" class="st0 st1">FairBridge</text>

That's not really what I want , I would really like each letter to be animatable, so do I have to draw the letters too? That would be quite a difficult task !! How exactly I go about making each letter animatable and at the same time part of the SVG?

P.S. : I know this question in a way pertains to graphic design, but since it takes a very beginner level of understanding and also since eventually I want the logo to be used with CSS-3 animation, I thought it would be fit to ask on SO rather than a graphic design forum.



Solution :

You could use animate the dy attribute using SMIL or javascript. Here's an animation of a single letter with no other structural changes.

<svg>
  <text x="30" y="30">FairBridge
    <animate attributeName="dy" from="0 0 0" to="0 -20 20" dur="1s" repeatCount="indefinite"/>
  </text>
</svg>


    CSS Howto..

    how to make a css gradient stop after so many pixels?

    How do I use CSS to reposition this image?

    How to hide first level span element by CSS “>” selector

    API embeded code is sending