在不同的浏览器缩放级别缩放时，边框半径圆失去形状

Question

我有一个 4px 的小圆圈，我想使用anime.js 来缩放它的大小。它在 100% 缩放（默认）时效果很好，但我也希望它在 50-100% 的默认缩放时表现相同。

小提琴示例：https://jsfiddle.net/6x4ry3no/1/

如示例小提琴中所示，如果您在 Windows 上使用'CMD' + '-' 或等效项进行缩小，您会注意到圆圈在其他缩放级别介于 50-100% 之间时会变成圆角四边形，这是不可取的。

这似乎与缩放百分比除以宽度/高度的比例松散相关，因为在某些百分比上它似乎很好。

理想情况下，我只使用 SVG 来避免这种情况，但据我所知，缩放 SVG 还需要转换以将形状保持在我想避免的相同位置。

有什么想法吗？

Answer 1

我尝试过的任何技巧都没有在缩小时保持圆的圆度——太奇怪了。但是，如果我用 SVG 替换小提琴中的 div（并从 CSS 中删除边框半径和 bg-color），事情似乎确实可以正常工作：

#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>