title: Passing an attribute & value to a circle
body: <p>I have a Linux server that is serving up a local network application that dashboard some database based data to users. There is a server side using node.js and a web side made with vue.</p>
  
  <p>I'm trying to create a simple html/CSS gauge that provides a visual of some average in the data, but right now i am stuck at just passing a value to the right attribute of a circle. My "gauge" is just different color circles overlayed and then a "mask" that is greyed out and based on the average will reveal more and more of the other circle colors. The attribute i am working on passing data to is the "stroke-dasharray" but nothing seems to be pushing through to the web page. It works if i hard code the attribute, but that obviously it needs to be dynamic.</p>
  
  <p>Im new to this stuff - so my knowledge was that my script goes in a script tag in the page. is this the wrong approach?</p>
  
  <p>Below i am trying to pass a stroke-dasharray to the mask circle.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
  
    &lt;svg id="meter"&gt;
        
              &lt;circle id="low" r="150" cx="50%" cy="50%" stroke="#FF0000" stroke-width="60" stroke-dasharray="707, 943" fill="none"&gt;&lt;/circle&gt; 
              &lt;circle id="avg" r="150" cx="50%" cy="50%" stroke="#FFFF00" stroke-width="60" stroke-dasharray="471, 943" fill="none"&gt;&lt;/circle&gt;
              &lt;circle id="high" r="150" cx="50%" cy="50%" stroke="#008000" stroke-width="60" stroke-dasharray="236, 943" fill="none"&gt;&lt;/circle&gt;
              &lt;circle id="mask" r="150" cx="50%" cy="50%" stroke="#a9a9a9" stroke-width="65" fill="none"&gt;&lt;/circle&gt;
              
            &lt;/svg&gt;
  &lt;/div&gt;
  &lt;/app-shell&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    var cf = 943;
    var semi_cf = 250;
  
    document.querySelector('#mask').setAttribute("stroke-dasharray", semi_cf + "," + cf);
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>