SVG <use> изменение размера

Question

Привет Я использую повторно используемые компоненты SVG.

<svg id="svgs" style='display:none;'> 
    <defs> 
    <g id="cross" viewBox="0 0 20 20"> 
     <path d="M19.56....."/> 
    </g> 
    </defs> 
</svg> 

<div> 
    The button 
</div> 
<button class='red-button'> 
    <svg class='icon-cross' preserveAspectRatio="xMinYMin meet"> 
    <use xlink:href="#cross"></use> 
    </svg> 
</button> 

<div style='margin-top: 2em'> 
    Small button :(
</div> 
<button class='red-button small'> 
    <svg class='icon-cross' preserveAspectRatio="xMinYMin meet"> 
    <use xlink:href="#cross"></use> 
    </svg> 
</button> 

Смотрите здесь на codepen

Есть ли способ сделать SVGs реагировать на их контейнер?

Answer 1

g элемент не поддерживается viewBox атрибут. Если вы измените g, то до svg он будет масштабироваться просто отлично. Пример:

<svg id="svgs" style='display:none;'> 
    <defs> 
    <svg id="cross" viewBox="0 0 20 20"> 
     <path d="M19.56....."/> 
    </svg> 
    </defs> 
</svg>