Angel Politis Angel Politis - 5 months ago 9
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="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1440 1440" enable-background="new 0 0 1440 1440"
xml:space="preserve" height="512px" width="512px">
<g>
<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
c4.691-3.805,7.039-9.764,7.039-17.885c0-8.117-2.348-14.08-7.039-17.887c-4.697-3.805-12.368-5.707-23.023-5.707
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
c0-8.117-2.348-14.08-7.039-17.886c-4.697-3.806-12.367-5.708-23.023-5.708s-18.33,1.902-23.023,5.708
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
c0-8.116-2.348-14.08-7.039-17.885c-4.697-3.807-12.367-5.709-23.023-5.709s-18.33,1.902-23.023,5.709
c-4.697,3.805-7.039,9.769-7.039,17.885C1133.436,648.467,1135.777,654.424,1140.475,658.23z" />
</g>
</svg>





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


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

  2. position: relative;
    and
    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
svg
elements require such special treatment and don't work as every other "normal" HTML element.

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

<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 60 70"
to="360 60 70"
dur="10s"
repeatCount="indefinite"/>


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

Answer

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)");
Comments