Как сделать SVG отзывчивым ростом?

Question

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

Контейнер before равен правильная высота, но svg собирается на большую высоту, чем родительский.Настройка высоты окна просмотра меняет ее, но она не отвечает.

Кто-то предложил добавить svg: not (root).Это совсем не помогло.

<svg class="svg-responsive" viewBox="0 0 100 100" 
xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="none" 
style="position: absolute;">
    <style>
    rect.shape{
        fill: transparent;
        stroke: rgba(255,255,255,0.3);
        stroke-width: 0.25;
    }
    svg:not (:root ) {
        width:100%;
        height: auto;
    }
</style>
<rect class="shape" width="100%" height="100%"></rect>

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

Answer 1

Ваш контейнер position: relative?Абсолютно позиционированные элементы располагаются относительно ближайшего относительного родителя.

Если это не сработает, опубликуйте больше своего кода.

Если вы просто пытаетесь обвести списки, вы можете заглянуть в свойство border css, так как с ним будет проще иметь дело.