[ANSWERED] html – Scaling SVG Polyline Drawing

Question 1

As commented by @Temani Afif for these purposes you need to use viewBox

Container parent dimensions must be specified in relative units vh, vw or as a percentage

.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>

Question 2

I have a SVG polyline drawing in 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>

But i want to make it responsive in such manner that it fits whatever container i put this into. (Col-8,10,12 etc.)

So far i tried to use width, transform: scale() and many other css attributes but none of them did do the trick.

How can i scale it according to parent, has to be responsive. Stretch factor and aspect ratio’s are out of concern, can be stretchered. Even the smallest idea counts. Thanks in advance.

Bollate

[ANSWERED] html – Scaling SVG Polyline Drawing

By

Solution 1 :

Problem :

Comments

Comment posted by developer.mozilla.org/en-US/docs/Web/SVG/Attribute/…

Comment posted by Skywarth

Comment posted by Alexandr_TT

By

Related Post

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate