從組底部使用CSS旋轉SVG
[英]Rotating SVG with CSS from bottom of group
問題描述
我正在嘗試創建某種規格的動畫。 我在矩形中添加了兩個簡單的量規。 當我嘗試旋轉針時，它不會圍繞其底部旋轉。 相反，即使我聲明要繞底部中心旋轉，它也會繞另一個點旋轉。 我該怎么做才能從底部旋轉針？ 謝謝。
編輯：這是我想要實現的動畫
<!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>
1 個解決方案
解決方案1
0 已采納 2017-08-31 16:56:30
嘗試將transform-origin添加到元素本身。 由於這是一個固定屬性，不會隨時間變化，因此它不應成為關鍵幀的一部分。
#Gaugaetip2 {
animation: dance 2s infinite alternate;
transform-origin: center 84%;
transform-box: fill-box;
}
@keyframes dance {
100% {
transform: rotate(-25deg);
}
}
我還稍微調整了原點位置，以使其居中於圓形部分。
使用 css 旋轉 svg 會導致 svg 上出現灰色背景
[英]Rotating svg with css causes a gray background to appear on the svg
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.