Resizing svg element

Question

I need a flexible svg element, but this is the first time using it. I tried to change the width, heigh & even set positioning property for the circle but none of them work. How to resize this circle? Thanks in advance

 .chart { position: relative; display: inline-block; color: #999; font-size: 20px; text-align: center; } .chart figcaption { position: absolute; top: 38%; left: 39%; } .outer { fill: transparent; stroke: #333; stroke-width: 20; stroke-dasharray: 534; transition: stroke-dashoffset 1s; -webkit-animation-play-state: running; /* firefox bug fix - won't rotate at 90deg angles */ -moz-transform: rotate(-89deg) translateX(-190px); } .chart[data-percent="75"] .outer { stroke-dashoffset: 133; //stroke-dashoffset: 50; -webkit-animation: show75 2s; animation: show75 2s; } @keyframes show75 { from { stroke-dashoffset: 537; } to { stroke-dashoffset: 124; } }

 <div class="container text-center"> <figure class="chart" data-percent="75"> <figcaption>45%</figcaption> <svg width="200" height="200"> <circle class="outer mr-auto ml-auto" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"></circle> </svg> </figure> </div>

When i resize the circle i got something like this: Resized circle

Answer 1

Don't use a set height or width on the SVG, use the viewbox attribute instead

  <svg viewbox="0 0 200 200">

Then the SVG will scale to any size you want just by using a width on the parent container.

The viewBox attribute defines the position and dimension, in user space, of an SVG viewport.

Viewbox @ MDN

 .container.text-center { /* for demo */ display: inline-block; text-align: center; } .chart { position: relative; display: inline-block; color: #999; font-size: 20px; width: 100px; /* size here */ } .chart figcaption { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .outer { fill: transparent; stroke: #333; stroke-width: 20; stroke-dasharray: 534; transition: stroke-dashoffset 1s; -webkit-animation-play-state: running; /* firefox bug fix - won't rotate at 90deg angles */ -moz-transform: rotate(-89deg) translateX(-190px); } .chart[data-percent="75"] .outer { stroke-dashoffset: 133; //stroke-dashoffset: 50; -webkit-animation: show75 2s; animation: show75 2s; } @keyframes show75 { from { stroke-dashoffset: 537; } to { stroke-dashoffset: 124; } } .chart.wide { width: 150px; }

 <div class="container text-center"> <figure class="chart" data-percent="75"> <figcaption>45%</figcaption> <svg viewbox="0 0 200 200"> <circle class="outer mr-auto ml-auto" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"></circle> </svg> </figure> </div> <div class="container text-center"> <figure class="chart wide" data-percent="75"> <figcaption>45%</figcaption> <svg viewbox="0 0 200 200"> <circle class="outer mr-auto ml-auto" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"></circle> </svg> </figure> </div>

Answer 2

Using the transform property you can scale the circle however you want. For example: using transform: scale(0.5,0.5); will scale the circle to half width and height. W3 Schools shows how this works nicely .

However, you can't transform text, so you will have to move it manually.

 .chart { position: relative; display: inline-block; color: #999; font-size: 20px; text-align: center; } .chart figcaption { position: absolute; top: 18%; left: 15%; } .outer { fill: transparent; stroke: #333; stroke-width: 20; stroke-dasharray: 534; transition: stroke-dashoffset 1s; -webkit-animation-play-state: running; /* firefox bug fix - won't rotate at 90deg angles */ -moz-transform: rotate(-89deg) translateX(-190px); } .chart[data-percent="75"] .outer { stroke-dashoffset: 133; //stroke-dashoffset: 50; -webkit-animation: show75 2s; animation: show75 2s; transform: scale(0.5, 0.5); } @keyframes show75 { from { stroke-dashoffset: 537; } to { stroke-dashoffset: 124; } }

 <div class="container text-center"> <figure class="chart" data-percent="75" transform=""> <figcaption>45%</figcaption> <svg width="200" height="200"> <circle class="outer mr-auto ml-auto" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"></circle> </svg> </figure> </div>