时间戳

首页 > 解决方案 > 在不同的浏览器缩放级别缩放时，边框半径圆失去形状

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

问题描述

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

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

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

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

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

有任何想法吗？

标签： cssanime.jsborder-radius

解决方案

我尝试的所有技巧都没有在缩小时保持圆的圆度——超级奇怪。但是，如果我用 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>

推荐阅读