CSSまたはJavaScriptを使用してSVGパスをアニメーション化または遷移させるにはどうすればよいですか？

Question

私は次のコードを持っているのAdobe IllustratorでSVG画像を作成している：私は達成したい何

<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>

は、私がSVGに置くと一番上のドットが上方に移動することです。これまでのところ、私は次のことを試してみました：

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

2. position: relative;とbottom: 10px;

3. margin-bottom: 10px;

4. padding-bottom: 10px;

残念ながら、上記のどれもうまくいきませんでした。なぜ、svg要素にこのような特別な処理が必要なのか不思議に思っています。他のすべての「通常の」HTML要素と同じように動作しません。

animatetransformを使用してポリゴンをアニメーション化することができます。しかし、それは私のために道でも働かないようです。

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

一番上のドットを上に移動するために変更する必要があるプロパティは何ですか？

Answer 1

パスポイントを操作するには、JavaScriptを使用する必要があります。次のコードでは、目的の結果が得られます。

$("#path1").css("transform", "translate(0, -100px)");