Question

我正在尝试使svg响应，但是我似乎无法弄清楚，它放置不正确，有时会脱离容器，真的很感谢任何帮助，谢谢

Codepen链接：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，可缩放以适应可用空间。在您的示例中，为了使其具有响应性，您应该将width="257.67"替换为SVG的height="773" viewBox="0 0 257.67 773"。

SVG没有响应，已脱离容器

1 个答案: