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:
transform: translate(0, 10px);
position: relative; and bottom: 10px;
margin-bottom: 10px;
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?
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)");