'resizing a svg spinner gives me weird results

I have this svg spinner and want to change its dimansions from 79x79 to 140x140

I tried to change some params - for example:

width="140px" height="140px" viewBox = "0 0 140 140" etc

and getting weird results, like the spinner is cutted, center of rotation is moved etc

could someone help to resize it and - if possible - explain - what is the trick ?

.spwrap{
    text-align:center;
}

.spinner{
    display:inline-block;
    border-radius:50%;
}

.spcircle{
    stroke:red;
}
<div class='spwrap'>
<svg class='spinner' id='spinner' width="79px" height="79px" viewBox = "0 0 79 79">
  <g>
    <circle class = 'spcircle' id='spcircle' fill = "none" stroke-width="5" stroke-linecap="round" cx="37" cy="37" r="27" stroke-dasharray="79" stroke-dashoffset = "340"></circle>
    <animateTransform attributeName = "transform" type = "rotate" values = "0 37 37; 360 37 37" begin = "0s" dur="0.9s" repeatCount = "indefinite"/>
   </g>
</svg>
</div>
svg


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions