Круг с радиусом границы теряет форму при масштабировании на разных уровнях масштабирования браузера

Question

У меня есть маленький круг в 4 пикселя, и я хочу масштабировать его размер с помощью anime.js. Он отлично работает при 100% масштабировании (по умолчанию), но я также хочу, чтобы он вел себя так же при масштабировании по умолчанию от 50 до 100%.

Пример скрипки: https://jsfiddle.net/6x4ry3no/1/

Как видно из примера скрипки, если вы 'CMD' + '-' или эквивалент в Windows, чтобы уменьшить масштаб, вы заметите, что круг становится закругленным четырехугольником при других уровнях масштабирования от 50 до 100%, что нежелательно.

Кажется, это слабо связано с делимостью процента масштабирования на ширину / высоту, поскольку в некоторых процентах это кажется нормальным.

В идеале я бы просто использовал SVG, чтобы этого избежать, но, насколько мне известно, масштабирование SVG также требует преобразования, чтобы форма оставалась в том же месте, чего я бы хотел избежать.

Любые идеи?

Answer 1

Ни один из приемов, которые я пробовал, не помогал сохранить округлость круга при уменьшении - супер странно. Однако, если я заменю div в вашей скрипке на SVG (и удалю border-radius и bg-color из CSS), все будет работать правильно:

#circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
}

<svg viewBox="0 0 100 100" id="circle">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>