Есть ли способ установить ширину элемента SVG на 100%?

Question

Поддерживает ли SVG процентную ширину процента? Я попытался установить ширину на 100%, и она не изменилась. Если не есть что-нибудь, что я могу сделать, чтобы убедиться, что горизонтальная линия простирается на всем протяжении элемента?

У меня есть два варианта использования:

1. SVG Горизонтальная линия начинается на 20px слева и распространяется на 100% краю родительского дел. Div является гибким, поэтому изменяется размер. Таким образом, линия должна расти или сокращаться, чтобы выглядеть правильно.

2. SVG Вертикальная линия начинается с y 0 и растягивает высоту контейнера, в котором она находится. Высота контейнера является гибкой и может увеличиваться или уменьшаться.

Горизонтальная линия, проходящая через. Это, похоже, не работает в редакторе фрагмента кода для меня здесь, но это показывает строку на моей веб-странице. Может быть, я что-то не хватает:

<div style="position:absolute;top:100px;left:100px;width:150px;height:150px;border:1px dashed blue"> 
 
    <svg> 
 
    <line x1="0" x2="100" y1="0" y2="0" style="stroke:rgb(255,0,0);stroke-width:1;"></line> 
 
    </svg> 
 
</div>

Answer 1

Это прекрасно работает, наведите div, чтобы увидеть в действии:

div { 
 
    border:1px solid; 
 
    background:#f8f8f8; 
 
    width:25vw; 
 
    height:25vh; 
 
    transition:all 0.3s; 
 
} 
 
div:hover { 
 
    width:75vw; 
 
    height:75vh; 
 
} 
 
svg { 
 
    width:100%; 
 
    height:100%; 
 
}

<div> 
 
    <svg viewbox="0 0 260 220"> 
 
    <polygon points="200,10 250,190 10,210" style="fill:lime;stroke:purple;stroke-width:1" /> 
 
    </svg> 
 
</div>