SVG не реагирует, вырывается из контейнера - PullRequest
Новая
       16

SVG не реагирует, вырывается из контейнера

0 голосов
/ 17 сентября 2018

Я пытаюсь сделать мой svg отзывчивым, но я не могу понять это, он не помещается правильно, иногда он вырывается из контейнера, любая помощь будет очень признательна, спасибо

Кодовая ссылка: 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%;
}

1 Ответ

0 голосов
/ 17 сентября 2018

ViewBox создает отзывчивый SVG, который масштабируется в соответствии с доступным пространством.В вашем примере, чтобы сделать его отзывчивым, вы должны заменить SVG width="257.67" height="773" на viewBox="0 0 257.67 773".

...