文章/答案/技术大牛

发布

社区首页 >问答首页 >从组底部用CSS旋转SVG

问从组底部用CSS旋转SVG
EN

Stack Overflow用户

提问于 2017-08-31 16:38:02

回答 1查看 227关注 0票数 0

我正在尝试创建某种量规动画。我在一个矩形内增加了两个简单的量规。当我试图旋转一个针头时，它不会绕着它的底部旋转。相反，它绕着另一个点旋转，即使我的状态是围绕底部中心旋转。我该怎么做才能使针头从底部旋转？谢谢。

编辑:这是我想要实现的动画

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

html

css

svg

回答 1

Stack Overflow用户

回答已采纳

发布于 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);
  }
}

我还调整了原点位置，以保持圆心部分的中心位置。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45986370

复制

相似问题

问从组底部用CSS旋转SVG
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从组底部用CSS旋转SVGEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从组底部用CSS旋转SVG
EN