如何使内联SVG的父容器100%

Question

我正在尝试使内联SVG缩放到父元素的宽度。我觉得是圆圈元素导致了我的问题，但我不确定我应该改变什么来实现它。

我把容器设置为300x300px，我把viewBox设置为"0 0 300 300"我假设r cx cy等于它们的一半?我将其设置为"150";但是圆现在被切断了。

我一直在兜圈子(原谅双关语)改变尺寸，但没有运气。

感谢您的帮助。

请找到我的codepen的链接:https://codepen.io/MayhemBliz/pen/NWyNGxj

function circle() {
const progressRing = document.querySelector('.progress-ring');
const circle = document.querySelector('.progress-ring__bar');
const r = circle.getAttribute('r');
const percent = progressRing.dataset.percent;
const c = Math.PI * r * 2;
const pct = ((0 - percent) / 100) * c;
circle.style.strokeDashoffset = pct;
//const percentageText = document.querySelector('.percentage');
//percentageText.textContent = percent + "%";
}
window.addEventListener('load', circle);

.progress-ring {
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.progress-ring__svg {
/*transform: rotate(-90deg);*/
}
.progress-ring__bar-bg, .progress-ring__bar  {
stroke-dashoffset: 0;
transition: stroke-dashoffset 1s linear;
stroke: #FF9F1E;
stroke-width: 1em;
}
.progress-ring__bar {
stroke: #666;
}
.percentage {
position: absolute;
font-size: 2.5rem;
font-weight: bold;
}

<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="150" cx="150" cy="150" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
<circle class="progress-ring__bar" r="150" cx="150" cy="150" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
</svg>
<span class="percentage">80%</span>
</div>

Answer 1

为了避免溢出，您可以为stroke-width和r(半径)使用基于百分比的值，如下所示:

<circle r="47.5%" cx="50%" cy="50%" />

或基于像素的近似，如

<circle r="142" cx="150" cy="150" />

function circle() {
const progressRing = document.querySelector('.progress-ring');
const circle = document.querySelector('.progress-ring__bar');
const r = circle.getAttribute('r');
const percent = progressRing.dataset.percent;
const c = Math.PI * r * 2;
const pct = ((0 - percent) / 100) * c;
circle.style.strokeDashoffset = pct;

//const percentageText = document.querySelector('.percentage');
//percentageText.textContent = percent + "%";

}
window.addEventListener('load', circle);

.progress-ring {
width: 300px;
/*height: 300px;*/
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
max-width:100%;
}
.progress-ring__svg {
//width:100%;
/*transform: rotate(-90deg);*/
}
.progress-ring__bar-bg, .progress-ring__bar  {
stroke-dashoffset: 0;
transition: stroke-dashoffset 1s linear;
stroke: #FF9F1E;
stroke-width: 5%;
}
.progress-ring__bar {
stroke: #666;
}
.percentage {
position: absolute;
font-size: 2.5rem;
font-weight: bold;
}
.resize{
resize:both;
overflow:auto;
border: 1px solid #ccc;
padding:1em;
}

<div class="resize">
<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="47.5%" cx="50%" cy="50%" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
<circle class="progress-ring__bar" r="142" cx="150" cy="150" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
<text class="percentage" x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" dy="2%">80%</text>
</svg>
</div>
</div>
<p>Resize me</p>

但是，您也可以使用<text>元素而不是<span>元素来保持文本大小相对于svg边界的百分比。