title: Resizing SVG on Angular
body: <p>I am working with Angular (not AngularJS) and I am trying to insert a circle graph on my project. </p>
  
  <p>HTML code is:</p>
  
  <pre><code>&lt;svg viewbox="0 0 36 36" class="circular-chart"&gt;
    &lt;path class="circle"
      stroke-dasharray="60, 100"
      d="M18 2.0845
        a 15.9155 15.9155 0 0 1 0 31.831
        a 15.9155 15.9155 0 0 1 0 -31.831"
    /&gt;
    &lt;/svg&gt;
  </code></pre>
  
  <p>CSS code is: </p>
  
  <pre><code>.circular-chart {
    display: block;
    margin: 10px auto;
    max-width: 80%;
    max-height: 250px;
  }
  
  .circle {
    stroke: #4CC790;
    fill: none;
    stroke-width: 2.8pt;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
  }
  
  @keyframes progress {
    0% {
      stroke-dasharray: 0, 100;
    }
  }
  </code></pre>
  
  <p>If you try to see this graph in a HTML page you don't have any problems. You can resize as you want. But if you try to insert this code in your Angular project graph show very small and I can't resize it!</p>
  
  <p>I've tried everything! I have made all kind of changes on CSS and nothing. I don't know how resize it... :(</p>