Как заставить элемент расширяться или сжиматься до размера его родительского контейнера?

Цель состоит в том, чтобы элемент расширялся до размеров своего родительского контейнера, в данном случае

, независимо от того, насколько большим или маленьким он может быть.

Код:

<style>
    svg, #container{
        height: 100%;
        width: 100%;
    }
</style>

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
         <rect x="0" y="0" width="100" height="100" />
    </svg>
</div>

Наиболее распространенным решением этой проблемы является установка атрибута viewBox на элемент .

viewBox="0 0 widthOfContainer heightOfContainer"

Однако, похоже, это не работает в случаях, когда элементы внутри элемента имеют предопределенные ширину и/или высоту. Например, элемент в приведенном выше коде имеет явно заданную ширину и высоту.

Поэтому очевидным решением является использование % widths и % heights и для этих элементов. Но нужно ли это вообще делать? Тем более, что прекрасно работает и расширяется/сжимается без проблем с явно заданными высотой и шириной.

Если элементы типа и другие подобные им элементы должны иметь ширину и высоту, заданные в процентах, есть ли способ в Inkscape установить так, чтобы все элементы документа использовали ширину, высоту и т.д. в процентах. вместо фиксированных размеров?

108
задан Alex M 1 December 2017 в 10:58
поделиться