将SVG的大小更改为其原始大小的45%，而不使用缩放

Question

我想让这个svg看起来像它实际大小的45%，所以我把它放大成这样：

.ring {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
margin-top: 40px;
}
.ring-circle {
stroke-dasharray: 0;
transition: stroke 0.60s ease, stroke-dashoffset 0.60s ease;

}
.guy {
zoom: 0.45;
}

<div class="guy">
<svg class="ring" height="200" width="200">
<circle stroke-width="8" stroke="#8a8184" fill="transparent" r="84" cx="100" cy="100"/>
<circle class="ring-circle" stroke-width="17" stroke="#ff8000" fill="transparent" r="84" cx="100" cy="100"/> 

<foreignObject height="162" width="162" x="19" y="19">
<img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/18320/profile/profile-512.jpg?3"
style="border-radius: 50%; width: 100%; height: 100%;"
/>
</foreignObject>
</svg>
</div>

我试图更改SVG本身的宽度和高度，而不是在CSS中使用缩放属性，但这样我只能更改视口，我认为。。。

Answer 1

使用viewBox并通过容器div:设置SVG的大小

.ring {
height: 100%;
width: 100%;   
}
.size-100-pct {
width: 200px;
height: 200px;
}
.size-45-pct {
width: 90px;
height: 90px;
}

<div class="size-100-pct">
<svg class="ring" viewBox="0 0 200 200">
<circle stroke-width="8" stroke="#8a8184" fill="transparent" r="84" cx="100" cy="100"/>
<circle class="ring-circle" stroke-width="17" stroke="#ff8000" fill="transparent" r="84" cx="100" cy="100"/> 
<foreignObject height="162" width="162" x="19" y="19">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/18320/profile/profile-512.jpg?3" style="border-radius: 50%; width: 100%; height: 100%" />
</foreignObject>
</svg>
</div>
<div class="size-45-pct">
<svg class="ring" viewBox="0 0 200 200">
<circle stroke-width="8" stroke="#8a8184" fill="transparent" r="84" cx="100" cy="100"/>
<circle class="ring-circle" stroke-width="17" stroke="#ff8000" fill="transparent" r="84" cx="100" cy="100"/> 
<foreignObject height="162" width="162" x="19" y="19">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/18320/profile/profile-512.jpg?3" style="border-radius: 50%; width: 100%; height: 100%" />
</foreignObject>
</svg>
</div>