How can I animate or transition SVG paths with CSS or JavaScript?
<p>I have created an SVG image in Adobe Illustrator which has the following code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;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"&gt;
  &lt;g&gt;
    &lt;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" /&gt;
    &lt;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" /&gt;
    &lt;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" /&gt;
  &lt;/g&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>

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

<ol>
<li><p><code>transform: translate(0, 10px);</code></p></li>
<li><p><code>position: relative;</code> and <code>bottom: 10px;</code></p></li>
<li><p><code>margin-bottom: 10px;</code></p></li>
<li><p><code>padding-bottom: 10px;</code></p></li>
</ol>

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

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

<pre><code>&lt;animateTransform attributeName="transform"
                      attributeType="XML"
                      type="rotate"
                      from="0 60 70"
                      to="360 60 70"
                      dur="10s"
                      repeatCount="indefinite"/&gt;
</code></pre>

<p>What is the property I have to change in order to move the topmost dot upwards?</p>