Html 如何使SVG完全响应。

今天我一直在和SVG打交道，我想知道我将如何使我所做的完全响应。我在下面制作了这把JS小提琴给大家看

            <div id="cont" data-pct="25">
                <svg id="svg" width="200" height="200" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <radialGradient id="grad1" cx="80%" cy="60%" r="70%" fx="60%" fy="40%">
                            <stop offset="0%" style="stop-color:rgb(33,204,185);" />
                            <stop offset="100%" style="stop-color:rgb(31,98,205);stop-opacity:1" />
                        </radialGradient>
                    </defs>                    
                    <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
                    <circle id="bar" r="90" cx="100" cy="100" stroke="url(#grad1)" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
                </svg>
            </div>

目前它有固定的宽度和高度

我可以让它的工作没有宽度是100%，但不能得到它与高度正确对齐

---

期待学习解决这一问题的方法

您的视图框太小。这应该起作用：

<svg id="svg" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">

---

您的视图框太小。这应该起作用：

<svg id="svg" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">

没有viewPort这样的属性，您可能指的是viewBoxNice。谢谢你指出这能帮你解决问题吗？它确实改变了事情。。我不确定它是否已经修复了它，尽管它不应该是

viewBox=“0 0 200 200”

？没有像viewPort这样的属性，您可能是指viewBoxNice one Rob。谢谢你指出这能帮你解决问题吗？它确实改变了事情。。我不确定它是否已经修复了它，虽然它不应该是

viewBox=“0 0 200 200”

？我必须进行一些其他更改，但这将引导我找到解决方案我必须进行一些其他更改，但这将引导我找到解决方案