Масштабирование SVG Polyline Drawing

Question

У меня есть полилиния SVG в Javascript:

    <div class="col-12" style="background-color:teal;">
                    <svg>
    
                        <polyline fill="none"
                                  stroke="#ced4da"
                                  stroke-width="2"
                                  points="
           00,120
           20,60
           40,80
           60,20
           80,80
           100,80
           120,60
           140,100
           160,90
           180,80
           200, 110
           220, 10
           240, 70
           260, 100
           280, 100
           300, 40
           320, 0
           340, 100
           360, 100
           380, 120
           400, 60
           420, 70
           440, 80
         " />
    
                    </svg>
    
            </div>

Но я хочу, чтобы он был адаптивным, чтобы он подходил для любого контейнера, в который я его положил. (Col-8,10,12 et c.)

До сих пор я пытался использовать width, transform: scale () и многие другие атрибуты css, но ни один из них не помог.

Как я могу масштабировать его в соответствии с родителями, должен быть отзывчивым. Факторы растяжения и пропорции не имеют значения, могут быть растянуты. Даже самая маленькая идея имеет значение. Заранее спасибо.

Answer 1

Как прокомментировал @Temani Afif для этих целей, вам необходимо использовать viewBox

Размеры родительского контейнера должны быть указаны в относительных единицах vh, vw или в процентах

.col-12 {
width:100%;
height:100%;
}

<div class="col-12" style="background-color:teal;">
                    <svg viewBox="0 0 500 500">
    
                        <polyline fill="none"
                                  stroke="#ced4da"
                                  stroke-width="2"
                                  points="
           00,120
           20,60
           40,80
           60,20
           80,80
           100,80
           120,60
           140,100
           160,90
           180,80
           200, 110
           220, 10
           240, 70
           260, 100
           280, 100
           300, 40
           320, 0
           340, 100
           360, 100
           380, 120
           400, 60
           420, 70
           440, 80
         " />
    
                    </svg>
    
            </div>