像图像一样旋转SVG元素

Question

我试图使圆圈静止不动并围绕自身旋转，但它在页面中旋转。我刚刚开始学习SVG并停留在这一刻。感谢您的帮助。

https://jsfiddle.net/5rz82ct3/1/

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('.kolo svg #pomidor').classList.add('pomidor');
})

#pomidor {
  transform-origin: 50% 50%;
  opacity: 1;
  transition: all 4s;
}

#pomidor.pomidor {
  opacity: 1;
  transform: rotate(-360deg);
}

<div class="kolo">
  <svg width="246px" height="133px" viewBox="0 0 246 133" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <g id="pomidor">
            <g id="left">
              <path d="M188.669237,2.85577743 L220.007541,78.7916793 C215.011273,80.9577555 209.503344,82.159 203.7202,82.159 C181.0712,82.159 162.6422,63.731 162.6422,41.08 C162.6422,23.7394433 173.442929,8.87328458 188.669237,2.85577743 Z" id="tomato-dark" fill="#ED2D24">
              </path>         
            </g>
            <g id="right">
              <path d="M203.7202,0.0003 C198.1552,0.0003 192.8472,1.1183 188.0022,3.1323 L219.4392,79.0273 C234.3122,72.8423 244.8002,58.1653 244.8002,41.0803 C244.8002,18.4283 226.3712,0.0003 203.7202,0.0003" id="tomato-light" fill="green">
              </path>           
            </g>
          </g>
    </svg>
</div>
<button> Rotate circle</button>

Answer 1

您需要校准transform-origin以在该圆的中间设置变换点（（我在浏览器中使用标尺插件可以轻松找到它，没有魔法）：

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('.kolo svg #pomidor').classList.add('pomidor');
})

#pomidor {
  transform-origin:  204px 41px;
  opacity: 1;
  transition: all 4s;
}

#pomidor.pomidor {
  opacity: 1;
  transform: rotate(-360deg);
}

<div class="kolo">
  <svg width="246px" height="133px" viewBox="0 0 246 133" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <g id="pomidor">
            <g id="left">
              <path d="M188.669237,2.85577743 L220.007541,78.7916793 C215.011273,80.9577555 209.503344,82.159 203.7202,82.159 C181.0712,82.159 162.6422,63.731 162.6422,41.08 C162.6422,23.7394433 173.442929,8.87328458 188.669237,2.85577743 Z" id="tomato-dark" fill="#ED2D24">
              </path>         
            </g>
            <g id="right">
              <path d="M203.7202,0.0003 C198.1552,0.0003 192.8472,1.1183 188.0022,3.1323 L219.4392,79.0273 C234.3122,72.8423 244.8002,58.1653 244.8002,41.0803 C244.8002,18.4283 226.3712,0.0003 203.7202,0.0003" id="tomato-light" fill="green">
              </path>           
            </g>
          </g>
    </svg>
</div>
<button> Rotate circle</button>