Масштабирование нескольких динамически загружаемых изображений SVG в одном родительском контейнере - Angular7 - PullRequest
Новая
       77

Масштабирование нескольких динамически загружаемых изображений SVG в одном родительском контейнере - Angular7

0 голосов
/ 13 июля 2020

У меня есть требование, при котором мне нужно добавлять изображения SVG одно за другим (складывать по вертикали), и оно должно соответственно масштабироваться без полосы прокрутки для родительского контейнера в Angular7. Изображения добавляются динамически. Моя проблема в том, что я не знаю, как масштабировать эти изображения по отношению к родительскому контейнеру (для всех SVG существует только один родительский контейнер), и не должно быть полосы прокрутки для просмотра svgs. Изображения SVG должны масштабироваться соответствующим образом.

My HTMl выглядит так: 

<div id="stackedSVGParentContainer">
    <svg  width="16" height="4.5" viewBox="0 0 16 5" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M0.738516 4.5L2.33852 0.5H13.6615L15.2615 4.5H2.33852Z" fill="#E0E0E0" stroke="#212121"/>
         <line x1="1" y1="1.75" x2="15" y2="1.75" stroke="#262121" stroke-width="0.5"/>
         <line x1="2" y1="3.25" x2="14" y2="3.25" stroke="#262121" stroke-width="0.5"/>
    </svg>
    <svg width="16" height="135" viewBox="0 0 16 150" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect _ngcontent-ng-cli-universal-c326="" x="2.5" y="25.5" width="11" height="99" fill="#E0E0E0" stroke="#262121"></rect>
    </svg>
    <svg width="16" height="135" viewBox="0 0 16 150" fill="none" xmlns="http://www.w3.org/2000/svg">
           <rect _ngcontent-ng-cli-universal-c326="" x="2.5" y="25.5" width="11" height="99" fill="#E0E0E0" stroke="#212621"></rect>
    </svg>
</div>
...