グループの下からCSSでSVGを回転

私はある種類のゲージアニメーションを作成しようとしています。私は長方形の中に2つの簡単なゲージを追加しました。針を回転しようとすると、底部の周りを回転しません。代わりに、私は下の中心の周りを回転するように指示しても、別の点を中心に回転します。針を下から回転させるにはどうすればよいですか？ありがとう。グループの下からCSSでSVGを回転

EDIT：ここには、私が要素自体にtransform-originを追加してみてください

<!DOCTYPE html> 
 
    <html > 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
    <style> 
 
    #Gaugaetip2 { 
 
     animation: dance 2s infinite alternate; 
 
    } 
 
    @keyframes dance { 
 
     100% { 
 
     transform-origin: bottom center; 
 
     transform: rotate(-25deg); 
 
     } 
 
    } 
 
     </style> 
 
    </head> 
 
    
 
    <body> 
 
    <svg width="135px" height="135px" viewBox="0 0 135 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
     <title>test</title> 
 
     <defs> 
 
      <path d="M17.6298701,13.9630295 L17.6298701,4.43831169 L15.6298701,4.43831169 L15.6298701,13.9630295 C14.6733943,14.3565661 14,15.2976952 14,16.3961039 C14,17.8485411 15.177433,19.025974 16.6298701,19.025974 C18.0823073,19.025974 19.2597403,17.8485411 19.2597403,16.3961039 C19.2597403,15.2976952 18.5863459,14.3565661 17.6298701,13.9630295 L17.6298701,13.9630295 Z" id="path-1"></path> 
 
      <path d="M18.91403,13.9099151 L18.91403,4.38519729 L16.91403,4.38519729 L16.91403,13.9099151 C15.9575542,14.3034517 15.2841598,15.2445808 15.2841598,16.3429895 C15.2841598,17.7954267 16.4615928,18.9728596 17.91403,18.9728596 C19.3664671,18.9728596 20.5439001,17.7954267 20.5439001,16.3429895 C20.5439001,15.2445808 19.8705058,14.3034517 18.91403,13.9099151 L18.91403,13.9099151 Z" id="path-3"></path> 
 
     </defs> 
 
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
 
      <g id="test" transform="translate(-30.000000, -30.000000)"> 
 
       <g transform="translate(30.000000, 30.000000)"> 
 
        <rect id="background" fill="#4BBCE9" x="0" y="0" width="135" height="135" rx="8"></rect> 
 
        <g id="Gauge" transform="translate(5.136364, 8.642857)"> 
 
         <g id="Group-3" transform="translate(0.149351, 0.383117)"> 
 
          <ellipse id="Oval-3" stroke="#D8D8D8" fill="#FFFFFF" cx="16.6298701" cy="16.3961039" rx="15.7792208" ry="15.7792208"></ellipse> 
 
          <mask id="mask-2" fill="white"> 
 
           <use xlink:href="#path-1"></use> 
 
          </mask> 
 
          <use id="Gaugaetip2" fill="#D8D8D8" xlink:href="#path-1"></use> 
 
         </g> 
 
        </g> 
 
        <g id="Gauge-Copy-3" transform="translate(95.551948, 9.642857)"> 
 
         <ellipse id="Oval-3" stroke="#D8D8D8" fill="#FFFFFF" cx="15.7792208" cy="15.7792208" rx="15.7792208" ry="15.7792208"></ellipse> 
 
         <mask id="mask-4" fill="white"> 
 
          <use xlink:href="#path-3"></use> 
 
         </mask> 
 
         <use id="Gaugetip" fill="#D8D8D8" transform="translate(17.914030, 11.679028) rotate(25.000000) translate(-17.914030, -11.679028) " xlink:href="#path-3"></use> 
 
        </g> 
 
       </g> 
 
      </g> 
 
     </g> 
 
    </svg> 
 
    </body> 
 
    </html>

出典

2017-08-31 Meanteacher

を達成しようとしていますアニメーションです。これは時間とともに変化しない固定プロパティなので、キーフレームの一部であってはなりません。

#Gaugaetip2 { 
    animation: dance 2s infinite alternate; 
    transform-origin: center 84%; 
    transform-box: fill-box; 
} 
@keyframes dance { 
    100% { 
    transform: rotate(-25deg); 
    } 
}

また、丸みを帯びた部分の中央に位置するように原点位置を少し調整しました。

結果：https://jsfiddle.net/dowm6eff/

出典

2017-08-31 16:56:30 DMatoso

私はあなたの提案を追加しましたが、まだ針は円の内側に針を回転させるようにしようとしていますそのbottom.Iから回転しません。針は円の中心の内側で回転する必要があります – Meanteacher

'transform-box：fill-box 'を追加して、すべてのブラウザでtransform-originを正しく動作させるように編集しました。 – DMatoso

Btwは、コードがパーセンテージを使用しているため、ブラウザのサイズが変更された場合、アニメーションが中央付近で発生しません。円の中心を常にアニメーション化する方法はありますか？ Firefoxは動作しますが、safariはバグを超えています。 – Meanteacher

グループの下からCSSでSVGを回転

答えて

関連する問題