Angel Politis Angel Politis - 1 year ago 74
HTML Question

How can I animate or transition SVG paths with CSS or JavaScript?

I have created an SVG image in Adobe Illustrator which has the following code:

<svg id="logo_top" version="1.1" id="Layer_1" xmlns=""
xmlns:xlink="" x="0px" y="0px" viewBox="0 0 1440 1440" enable-background="new 0 0 1440 1440"
xml:space="preserve" height="512px" width="512px">
<path id="path1" d="M1140.475,774.096c4.692,3.807,12.367,5.709,23.023,5.709c10.655,0,18.326-1.902,23.023-5.709
c-10.656,0-18.331,1.902-23.023,5.707c-4.697,3.807-7.04,9.77-7.04,17.887C1133.435,764.332,1135.777,770.291,1140.475,774.096z" />
<path id="path2" d="M1140.475,716.163c4.693,3.806,12.367,5.708,23.023,5.708s18.326-1.902,23.023-5.708c4.691-3.806,7.039-9.764,7.039-17.886
c-4.697,3.806-7.039,9.769-7.039,17.886C1133.436,706.399,1135.777,712.357,1140.475,716.163z" />
<path id="path3" d="M1140.475,658.23c4.693,3.805,12.367,5.707,23.023,5.707s18.326-1.902,23.023-5.707c4.691-3.807,7.039-9.764,7.039-17.887
c-4.697,3.805-7.039,9.769-7.039,17.885C1133.436,648.467,1135.777,654.424,1140.475,658.23z" />

What I want to achieve is to have the topmost dot move upwards when I hover on the
. So far I have tried the following:

  1. transform: translate(0, 10px);

  2. position: relative;
    bottom: 10px;

  3. margin-bottom: 10px;

  4. padding-bottom: 10px;

Unfortunately, none of the above has worked and I am now left curious as to why
elements require such special treatment and don't work as every other "normal" HTML element.

I know that polygons can be animated using
. But it doesn't seem to work for me on paths too.

<animateTransform attributeName="transform"
from="0 60 70"
to="360 60 70"

What is the property I have to change in order to move the topmost dot upwards?

Answer Source

In order to manipulate the path points the use of JavaScript is required. The following code achieves the desired result:

$("#path1").css("transform", "translate(0, -100px)");
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download