文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >SVG元素在圆上旋转

问SVG元素在圆上旋转
EN

Stack Overflow用户
提问于 2019-04-25 21:41:42
回答 4查看 7.6K关注 0票数 5

所以我有一个SVG元素--大圆圈--和一组元素。

我想把这些元素绕着这个大圆圈旋转。代码非常简单，但是我已经搞不懂如何将这个圆(graph__skils)设置在正确的路径(大圆)上。正如你在下面的链接中看到的，这个小圆圈在大圆圈上的旋转不正确。请帮帮忙

Circle rotate jsfiddle

HTML文件

代码语言：javascript
复制
<section class="graph">
 <svg xmlns="http://www.w3.org/2000/svg" 
    width="670" 
    height="696" 
    viewBox="0 0 670 696">
    <g>
      <g class="graph__middle">
         <path fill="#3f9" d="M345 264c34.794 0 63 28.206 63 63s-28.206 63-63 63-63-28.206-63-63 28.206-63 63-63z"/>
      </g>

       <g class="graph__design" >
          <g class="graph_mainCircle">
             <path fill="none" stroke="#cf9" stroke- linecap="round" stroke-linejoin="round" stroke-miterlimit="50" d="M345 197c71.797 0 130 58.203 130 130s-58.203 130-130 130-130-58.203-130-130 58.203-130 130-130z"/>
          </g>

          <g class="graph__skills">
             <g class="graph__middle">
                <path fill="#cf9" d="M445.053 387c11.052 0 20.012 8.954 20.012 20s-8.96 20-20.012 20-20.012-8.954-20.012-20 8.96-20 20.012-20z"/>
              </g>
         </g>
      </g>
    </g>
</svg>

​

SCSS文件

代码语言：javascript
复制
.graph {
  position: relative;
  width:500px;
  height:500px;

  svg {
    position: relative;
    border: 2px solid blue;
    width: 99%;
    height: 99%;
  }

  &__design {
    position: relative;
  }

  &__skills {
    transform-origin: center;
    position: absolute;
    animation: mercury-group 18s linear infinite;
  }

  &__middle {
    position: relative;
  }
}

@keyframes mercury-group {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(-360deg);
  }
}
css
animation
svg
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2019-04-25 21:57:56

svg元素的中心不是行星的中心。您需要将transform-origin更改为345px 328px。为了计算新的中心，我对graph__middle使用了getBBox()方法

​

代码语言：javascript
复制
.graph {
  position: relative;
  width: 500px;
  height: 500px;
}
.graph svg {
  position: relative;
  border: 2px solid blue;
  width: 99%;
  height: 99%;
}
.graph__design {
  position: relative;
}
.graph__skills {
  transform-origin: 345px 328px;
  position: absolute;
  animation: mercury-group 18s linear infinite;
}
.graph__middle {
  position: relative;
}

@keyframes mercury-group {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}
代码语言：javascript
复制
<section class="graph">
     <svg xmlns="http://www.w3.org/2000/svg" 
        width="670" 
        height="696" 
        viewBox="0 0 670 696">
        <g>
          <g class="graph__middle" id="KK">
             <path fill="red" d="M345 264c34.794 0 63 28.206 63 63s-28.206 63-63 63-63-28.206-63-63 28.206-63 63-63z"/>
          </g>

           <g class="graph__design" >
              <g class="graph_mainCircle">
                 <path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="50" d="M345 197c71.797 0 130 58.203 130 130s-58.203 130-130 130-130-58.203-130-130 58.203-130 130-130z"/>
              </g>

              <g class="graph__skills">
                 <g class="graph__middle">
                    <path d="M445.053 387c11.052 0 20.012 8.954 20.012 20s-8.96 20-20.012 20-20.012-8.954-20.012-20 8.96-20 20.012-20z"/>
                  </g>
             </g>
          </g>
        </g>
       
       <circle cx="345" cy="328" r="3" />
    </svg>
</section>

​

票数 4
EN

Stack Overflow用户

发布于 2019-04-25 21:47:36

您可以像下面这样旋转大圆圈：

​

代码语言：javascript
复制
.graph {
  position: relative;
  width: 500px;
  height: 500px;
}

svg {
  position: relative;
  border: 2px solid blue;
  width: 99%;
  height: 99%;
}

.graph__design {
  position: relative;
  transform-box:fill-box;
  transform-origin: center;
  animation: mercury-group 18s linear infinite;
}

.graph__skills {
  transform-origin: center;
  position: absolute;
}

.graph__middle {
  position: relative;
}



@keyframes mercury-group {
  0% {
    transform: rotateZ(0deg);
  }
  
  100% {
    transform: rotateZ(-360deg);
  }
}
代码语言：javascript
复制
<section class="graph">
  <svg xmlns="http://www.w3.org/2000/svg" width="670" height="696" viewBox="0 0 670 696">
        <g>
          <g class="graph__middle">
             <path fill="#3f9" d="M345 264c34.794 0 63 28.206 63 63s-28.206 63-63 63-63-28.206-63-63 28.206-63 63-63z"/>
          </g>

           <g class="graph__design" >
              <g class="graph_mainCircle">
                 <path fill="none" stroke="#cf9" stroke- linecap="round" stroke-linejoin="round" stroke-miterlimit="50" d="M345 197c71.797 0 130 58.203 130 130s-58.203 130-130 130-130-58.203-130-130 58.203-130 130-130z"/>
              </g>

              <g class="graph__skills">
                 <g class="graph__middle">
                    <path fill="#cf9" d="M445.053 387c11.052 0 20.012 8.954 20.012 20s-8.96 20-20.012 20-20.012-8.954-20.012-20 8.96-20 20.012-20z"/>
                  </g>
             </g>
          </g>
        </g>
    </svg>
</section>

​

票数 4
EN

Stack Overflow用户

发布于 2019-04-29 01:13:18

SVG示例

我的例子并没有完全回答你的问题，但我希望你能从我的回答中获得一些想法。

根据动画mercury-group的名称判断，您希望创建一个太阳系模型。

我提出了行星围绕太阳旋转的动画的一个变体。

我把太阳系行星的旋转中心定位在太阳的中心，这个中心的坐标是x =" 250 "，y =" 175 "，y =" 175 "。

因此，行星围绕太阳旋转的动画团队具有以下形式：

代码语言：javascript
复制
<animateTransform 
      attributeName="transform" 
      type="rotate"
      values="0 250 175;360 250 175" 
      dur="12s"
      repeatCount="indefinite"
  />

滤镜和渐变用于设计行星和太阳的外观。

太阳的波纹及其颜色变化的动画

代码语言：javascript
复制
<radialGradient id="gradSun">
        <stop offset="80%" stop-color="yellow">
         <animate attributeName="offset" values="80%;20%;80%" dur="6s" repeatCount="indefinite" />
         </stop>
        <stop offset="100%" stop-color="gold" >
        <animate attributeName="stop-color" values="gold;red;gold" dur="6s" repeatCount="indefinite" />
        </stop>
      </radialGradient>

以下是行星围绕太阳旋转的完整动画代码：

​

代码语言：javascript
复制
.solar-system{
  background-color:#002;
  width:100%;
  height:100%;
}
.sun{
  
  fill:url(#gradSun);
  filter:url(#dropShadow2);
  
 }
 .Earth-orbit{
  stroke:rgba(255,255,255,.4);
    stroke-width:1;
  fill:none;
  }
.Earth{
   filter:url(#dropShadow1);
   fill:url(#gradEarth);
 }
代码语言：javascript
复制
<div class="solar-system">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 500 400" > 
 <defs>
 <filter id="dropShadow1" 
    x="-20%" y="-20%" 
		width="150%" height="150%">
	<feGaussianBlur   stdDeviation="1" />
 </filter>
    <filter id="dropShadow2" 
		x="-20%" y="-20%" 
		width="150%" height="150%">
		<feGaussianBlur   stdDeviation="4" />
	</filter>
	 <radialGradient id="gradSun">
        <stop offset="80%" stop-color="yellow">
		 <animate attributeName="offset" values="80%;20%;80%" dur="6s" repeatCount="indefinite" />
		 </stop>
        <stop offset="100%" stop-color="gold" >
		<animate attributeName="stop-color" values="gold;red;gold" dur="6s" repeatCount="indefinite" />
		</stop>
      </radialGradient>
 <linearGradient id="gradEarth">
	<stop offset="40%" stop-color="dodgerblue"></stop>
	<stop offset="100%" stop-color="yellowgreen" ></stop>
 </linearGradient>	  
 </defs>	 
 <!-- planet rotation animation -->
   <g>
  <animateTransform 
	  attributeName="transform" 
	  type="rotate"
      values="360 250 175;0 250 175" 
	  dur="12s"
	  repeatCount="indefinite"
  />
 <circle class="Earth-orbit" cx="250" cy="175" r="90"     />
 <circle class="Earth" cx="160" cy="175" r="10" transform="rotate(45 250 175)"  />
</g>
 <circle class="sun" cx="250" cy="175" r="20"  /> 
</svg>

​

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

https://stackoverflow.com/questions/55850691

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档