Изменить точку поворота многоугольника

Question

У меня есть многоугольник, который, кажется, имеет точку поворота в углу. Я хочу, чтобы он был посередине, чтобы я мог вращать его вокруг центра.

<svg id="scroll-icon" width="25" height="45" viewBox="0 0 27 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="sc-romb" stroke="#1089C9">
      <polygon class="scroll-rotate" points="15 0 24 9 15.0009335 18 6 9" data-svg-origin="15 15" ></polygon>
      <polyline id="sc-arrow" points="28 16 14.9950568 29 2 16" data-svg-origin="15 22.5"></polyline>
    </g>
  </g>
</svg>

Я пытался использовать Transform-origin:center; Но если у кого-то есть лучший обходной путь, который будет работать в большинстве браузеров, тогда я буду счастлив.

Я также пытался использовать transform: fill-box;, он НЕ РАБОТАЛ ...

Answer 1

Если я вас правильно понимаю, вы просто хотите это?

body {
  text-align: center;
  padding: 2rem;
}

@keyframes rotatorooni {
  100% {
    transform: rotate(360deg);
  }
}

.scroll-rotate {
  transform-origin: 15px 9px;
  animation: rotatorooni 2s linear infinite;
}

<svg id="scroll-icon" width="25" height="45" viewBox="0 0 27 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="sc-romb" stroke="#ff0000">
      <polygon class="scroll-rotate" points="15 0 24 9 15.0009335 18 6 9" data-svg-origin="15 15" ></polygon>
      <polyline id="sc-arrow" points="28 16 14.9950568 29 2 16" data-svg-origin="15 22.5"></polyline>
    </g>
  </g>
</svg>

За исключением проблемы, визуально она не очень гладкая, поскольку нижняя центральная точка соединения внизу этой фигуры фактически не находится в центре. Поэтому вам нужно либо настроить изображение в соответствии с правильным значением center center, либо настроить размер на размер, одинаково делимый, чтобы вы могли найти правильный источник преобразования с половинными размерами высоты и ширины, чтобы фактически установить его правильно на этой точке и сделать анимацию выглядеть гладкой.

Надеюсь, это поможет, ура.