如何实现内联SVG自适应父容器宽度并解决圆形元素截断问题

嘿，我来帮你搞定这个SVG圆形被截断的问题！你的思路方向是对的，但忽略了SVG描边的一个关键特性——描边是沿着路径中心线绘制的，这就是导致圆形被截断的核心原因。

问题根源 #

你设置了圆形半径r=150，刚好是viewBox宽度（300）的一半，同时给圆形设置了stroke-width: 1em。这意味着描边会有一半（0.5em）延伸到圆形路径的外侧，超出viewBox的范围，所以被截断了。

解决方案 #

我们需要调整圆形的半径，让它加上描边宽度的一半后刚好等于viewBox的半宽（150px），这样描边就不会超出viewBox了。同时还要确保SVG能正确缩放至父容器宽度。

步骤1：调整圆形半径

把两个circle元素的r属性修改为calc(150px - 0.5em)，这样描边的外侧刚好贴合viewBox的边缘：

<circle class="progress-ring__bar-bg" r="calc(150px - 0.5em)" cx="150" cy="150" fill="transparent"></circle>
<circle class="progress-ring__bar" r="calc(150px - 0.5em)" cx="150" cy="150" fill="transparent"></circle>

步骤2：优化SVG的缩放行为

给SVG添加width: 100%; height: auto;，让它自动适配父容器的宽度：

.progress-ring__svg {
  width: 100%;
  height: auto;
  /* transform: rotate(-90deg); 如果你需要让进度条从顶部开始，可以打开这个注释 */
}

步骤3：修正JavaScript中的周长计算

原来的代码是通过getAttribute获取r的值，但现在r是calc表达式，直接获取会有问题。我们可以通过SVG元素的内置属性获取实际半径，同时修正进度条的计算逻辑：

function circle() {
 const progressRing = document.querySelector('.progress-ring');
 const circle = document.querySelector('.progress-ring__bar');
 // 获取圆形的实际有效半径
 const r = circle.r.baseVal.value;
 const percent = progressRing.dataset.percent;
 const c = Math.PI * r * 2;
 // 修正计算逻辑，实现从0到指定百分比的进度效果
 const pct = ((100 - percent) / 100) * c;
 circle.style.strokeDasharray = c;
 circle.style.strokeDashoffset = pct;
 // 如果你需要显示百分比文本，可以打开下面的注释
 // const percentageText = document.querySelector('.percentage');
 // percentageText.textContent = percent + "%";
}
window.addEventListener('load', circle);

步骤4：移除硬编码的stroke-dasharray

原来的circle元素里硬编码了stroke-dasharray="565.48"，这会覆盖JS的动态计算，所以要把这个属性去掉，让JS自动设置合适的数值。

修改后的完整代码 #

HTML

<div class="progress-ring" data-percent="80">
 <svg class="progress-ring__svg" viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
 <circle class="progress-ring__bar-bg" r="calc(150px - 0.5em)" cx="150" cy="150" fill="transparent"></circle>
 <circle class="progress-ring__bar" r="calc(150px - 0.5em)" cx="150" cy="150" fill="transparent"></circle>
 </svg>
 <span class="percentage">80%</span>
</div>

CSS

.progress-ring {
 width: 300px;
 height: 300px;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto;
 position: relative; /* 确保百分比文本绝对定位生效 */
}
.progress-ring__svg {
 width: 100%;
 height: auto;
 /* transform: rotate(-90deg); */
}
.progress-ring__bar-bg, .progress-ring__bar {
 stroke-dashoffset: 0;
 transition: stroke-dashoffset 1s linear;
 stroke: #FF9F1E;
 stroke-width: 1em;
 fill: transparent;
}
.progress-ring__bar {
 stroke: #666;
}
.percentage {
 position: absolute;
 font-size: 2.5rem;
 font-weight: bold;
}

JavaScript

function circle() {
 const progressRing = document.querySelector('.progress-ring');
 const circle = document.querySelector('.progress-ring__bar');
 const r = circle.r.baseVal.value;
 const percent = progressRing.dataset.percent;
 const c = Math.PI * r * 2;
 const pct = ((100 - percent) / 100) * c;
 circle.style.strokeDasharray = c;
 circle.style.strokeDashoffset = pct;
}
window.addEventListener('load', circle);

这样修改后，圆形就不会被截断，而且SVG会自动适配父容器的宽度，进度条的动画也能正常工作啦！

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