javascript - 像图像旋转一样旋转SVG元素

我试着让圆圈静止不动，绕着自己旋转，但它在页面中旋转。
我刚开始学习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>

最佳答案

将transform box CSS属性设置为fill box，以便形状围绕自己的中心而不是viewBox旋转。

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

#pomidor {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  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>