Svg и div issue

Question

У меня есть изображение svg, которое не вписывается в мой div. Когда я изменяю размер svg, div не изменяет размер, чтобы соответствовать svg. Размер svg должен быть максимальным размером 700 пикселей, а затем изменить размер в виде размеров окна браузера. Я работал с другим элементом в Div1, который растягивал div1 до max-width:700px, но когда я удалил этот элемент, он перестал работать.

Я удалил скрипку, так как проблема решена.

Answer 1

Я нашел ответ. Я добавил теги изображений вокруг svg и задал ширину. Работает сейчас.

Answer 2

Если у вас есть изображение svg, оно будет расти настолько, насколько позволяет его контейнер.
Это ширина и высота. Итак, если элемент svg выглядит так: <svg height="100%" width="100%">
Он будет увеличиваться до размера контейнера.

Я использую CSS, чтобы изменить способ контролировать его размер:

.svg-class { //put this class on your svg element 
    width: 100%; 
} 

Так что, пока есть место в родительских контейнеров будет расти. Теперь мы хотим, чтобы ограничить его 700px: Просто добавьте максимальную ширину: 700px для контроля размера:

.svg-class { 
    width: 100%; 
    max-width: 700px; 
} 

Теперь он будет расти только до 700px ширины. Даже если контейнер больше.

body { 
 
    margin: 0; 
 
} 
 
.top { 
 
    background-color: black; 
 
} 
 
.sprite { 
 
    max-width: 700px; 
 
    width: 100%; 
 
}

<div class="top"> 
 
    <svg class="sprite" viewBox="0 0 100 100"> 
 
    <rect x="0" y="0" width="50" height="50" fill="red" /> 
 
    <rect x="50" y="0" width="50" height="50" fill="yellow" /> 
 
    <rect x="0" y="50" width="50" height="50" fill="green" /> 
 
    <rect x="50" y="50" width="50" height="50" fill="blue" /> 
 
    </svg> 
 
</div>