在不同的浏览器缩放级别缩放时，边界半径圆会变形

Question

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

如示例 fiddle 所示，如果您 'CMD' + '-' 或 Windows 上的等价物进行缩小，您会注意到在 50 之间的其他缩放级别下圆变成圆角四边形-100%，这是不可取的。

这似乎与缩放百分比被 width/height 整除松散相关，因为在某些百分比下它似乎没问题。

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

有什么想法吗？

Answer 1

None 我尝试过的技巧在缩小时保持圆的圆度——非常奇怪。但是，如果我将 fiddle 中的 div 替换为 SVG（并从 CSS 中删除 border-radius 和 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>

Border-radius circle loses shape when scaling at different browser zoom levels