SVG 没有响应，打破了容器

Question

我正在尝试让我的 svg 响应，但我似乎无法弄清楚，它没有正确放置，有时它会从容器中溢出，非常感谢任何帮助，谢谢

Codepen link: https://codepen.io/goprime/pen/pOxbPb

我的代码：

HTML:

<div class="container">
    <svg class="svg-responsive" xmlns="http://www.w3.org/2000/svg" width="257.67" height="773" style="isolation:isolate">
        <path fill="#F7931E" d="M128.835 0C57.682 0 0 57.681 0 128.834s57.682 128.833 128.835 128.833"/>
        <path d="M128.835 0v257.667"/>
        <path fill="#F7931E" d="M128.835 257.667c71.153 0 128.835 57.681 128.835 128.834s-57.682 128.832-128.835 128.832"/>
        <path d="M128.835 257.667v257.666"/>
        <path fill="#F7931E" d="M128.835 515.333C57.682 515.333 0 573.014 0 644.168 0 715.321 57.682 773 128.835 773"/>
        <path d="M128.835 515.333V773"/>
        <text transform="matrix(0 -.891 .891 0 109.663 170.26)" font-family="Raleway" font-weight="300" font-size="30">
            we3dx
        </text>
        <text transform="matrix(0 .891 -.891 0 147.806 321.91)" font-family="Raleway" font-weight="300" font-size="30">
            wooscape
        </text>
        <text transform="rotate(-90 409.21 299.547) scale(.891)" font-family="Raleway" font-weight="300" font-size="30">
            woostate
        </text>
    </svg>
</div>

和 CSS:

html,body{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    display:flex;
    justify-content:Center;
    align-items:Center;
}

.container{
    position: relative;
    height:70%;
    width:30%;
    border:3px solid coral;
}

.svg-responsive{
    height:100%;
    width:100%;
}

Answer 1

viewBox 创建响应式 SVG，可缩放以适应可用 space。在您的示例中，为了使其响应，您应该将 SVG 的 width="257.67" height="773" 替换为 viewBox="0 0 257.67 773".

SVG 没有响应，打破了容器

SVG not responsive, breaking out of the container

css

svg

responsive