SVG在Firefox与Edge中显示异常（被裁切），Chrome正常

我碰到过好多次这种跨浏览器SVG渲染的坑，你的问题核心是Firefox和Edge对SVG变换元素的裁剪逻辑和Chrome不一致——当元素通过transform变换后超出了viewBox的范围，这两个浏览器会严格按照viewBox边界裁切内容，而Chrome会自动适配显示完整的变换元素。

问题分析 #

你的第二个<circle>用了transform="rotate(-90) translate(-20)"，这个变换会把元素移出viewBox="0 0 20 20"的可视区域，Firefox和Edge会直接裁切超出部分，所以你看不到完整的环形进度条效果。

两种可行的解决方案 #

方案1：调整transform属性，让元素保持在viewBox范围内

把变换改成基于圆心的旋转，用transform-origin更直观，避免元素移出可视区域：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
body { background: #000; }
.continer { width: 200px; height: 200px; }
svg circle:nth-child(2) {
  transform-origin: center center;
  transform: rotate(-90deg);
}
</style>
</head>
<body>
<div class="continer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<circle fill="rgba(255, 255, 255, 0.4)" cx="10" cy="10" r="10"></circle>
<circle stroke-dasharray="6.28 31.4" stroke-width="10" fill="transparent" stroke="#ffffff" cx="10" cy="10" r="5"></circle>
</svg>
</div>
</body>
</html>

方案2：扩大viewBox范围，容纳变换后的元素

如果不想改transform，可以把viewBox扩大，让变换后的元素完全在可视区域内：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
body { background: #000; }
.continer { width: 200px; height: 200px; }
</style>
</head>
<body>
<div class="continer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 30 30">
<circle fill="rgba(255, 255, 255, 0.4)" cx="10" cy="10" r="10"></circle>
<circle stroke-dasharray="6.28 31.4" transform="rotate(-90) translate(-20)" stroke-width="10" fill="transparent" stroke="#ffffff" cx="10" cy="10" r="5"></circle>
</svg>
</div>
</body>
</html>

为什么Chrome正常？ #

Chrome的Blink渲染引擎在处理SVG变换时，会自动扩展裁剪区域以显示完整的变换元素，而Firefox（Gecko）和Edge（即使现在基于Chromium，SVG裁剪逻辑仍有差异）严格遵循SVG规范，只显示viewBox范围内的内容。

内容的提问来源于stack exchange，提问作者VnoitKumar