#html #css #svg #bootstrap-4
Вопрос:
Я хочу настроить высоту svg для родительского контейнера div, который отлично работает с
svg { height: 100%; width: 100%; } Я использую .container класс начальной загрузки в качестве внешнего контейнера Я не хочу перезаписывать класс контейнера начальной загрузки, поэтому я использовал внутренний div с svg внутри
установка внутреннего div на
min-height: 20rem; отрегулируйте контейнер начальной загрузки, но svg не охватывает высоту внутреннего контейнера div
как я могу настроить высоту svg на внутреннюю высоту div ?
svg { height: 100%; width: 100%; background-color: blueviolet; } .svg-container { min-height: 20rem; background-color: rgb(211, 201, 219); border: solid black 6px; } lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8" /gt; lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /gt; lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /gt; lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" /gt; lt;titlegt;Boostrap-sample-projectlt;/titlegt; lt;/headgt; lt;bodygt; lt;div class="container"gt; lt;div class="svg-container"gt; lt;svggt;lt;/svggt; lt;/divgt; lt;/divgt; lt;!-- --gt; lt;/bodygt; lt;/htmlgt; Комментарии:
1. Дайте svg высоту. В этот момент у вас есть только минимальная высота. Высота элемента svg по умолчанию составляет 150 пикселей, и если у вас нет объявленной высоты контейнера, вы получите 150 пикселей
Ответ №1:
Вы можете использовать h-100 w-100 на svg. SVG должен иметь размеры в процентах, т. е. быть масштабируемым. И установите встроенную минимальную высоту на svg.
lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /gt; lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" /gt; lt;titlegt;Boostrap-sample-projectlt;/titlegt; lt;/headgt; lt;bodygt; lt;div class="container border border-5 border-dark bg-info"gt; lt;svg class="h-100 w-100" style="min-height:20rem"gt; lt;rect width="100%" height="100%" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /gt; Sorry, your browser does not support inline SVG. lt;/svggt; lt;/divgt; lt;/bodygt; lt;/htmlgt;