title: Polymer 3.0 Custom Element - How to Use javascript to interact with SVG
body: <p>I am new on Polymer, so I'm learning while developing. Right now I'm using the latest version, Polymer 3.0. I already had a working frontpage on this site I'm working on. While I was trying to make everything work on polymer, I got stuck with making the javascript work.</p>
  
  <p>On the original site, I was using this code</p>
  
  <p>index.html</p>
  
  <pre><code>                &lt;div class="year-overview"&gt;
  
                      &lt;div class="ano-lectivo"&gt;
                          &lt;svg class="progress-ring" width="50%" height="50%" opacity="0" viewBox="0 0 42 42"&gt;
                              &lt;circle class="progress-ring__circle" stroke="white" fill="transparent" r="15.91549430918954" cx="21" cy="21"&gt;&lt;/circle&gt;
                              &lt;text x="50%" y="53%" class="circle-text" text-anchor="middle"&gt;
                                  &lt;tspan class="currentDay"&gt;35&lt;/tspan&gt;
                                  &lt;tspan class="daysLeft"&gt;/ 300&lt;/tspan&gt;
                                  &lt;tspan x="50%" y="60%"&gt;Días Lectivos&lt;/tspan&gt;
                              &lt;/text&gt;
                          &lt;/svg&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>And this is the javascript file:</p>
  
  <pre><code>        function circleCircus(ringClass, circleClass, ringProgress) {
                  var circle = document.querySelector(circleClass);
                  var radius = circle.r.baseVal.value;
                  var circumference = radius * 2 * Math.PI;
                  var circleSVG = document.querySelector(ringClass); //For changing the opacity and not showing the circle before it loads
  
                  circle.style.strokeDasharray = `${circumference} ${circumference}`;
                  circle.style.strokeDashoffset = `${circumference}`;
  
                  function setProgress(percent) {
                      const offset = circumference - percent / 100 * circumference;
                      circle.style.strokeDashoffset = offset;
                  }
  
              setTimeout(function() {circleSVG.setAttribute("opacity", "100%");}, 1000); //Changing the circle opacity
              setTimeout(function() { setProgress(ringProgress); }, 2000); //Changin the value in order to animate
          }
  
          //----------------------Progress Bar 1------------------------------------
          circleCircus('.progress-ring', '.progress-ring__circle', 50);
  </code></pre>
  
  <p>Now that I'm working on Polymer I was creating a custom element for the donut chart, but I don't how to use or where to put the function that makes the strokeDasharray and the strokeDashoffset work correctly:</p>
  
  <pre><code>            import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
  
              class DonutChart extends PolymerElement {
                  static get template() {
                      return html`
                          &lt;style&gt;
  
                              .progress-ring__circle {
                                  stroke-width: 3;
                                  stroke: #000;
                                  position: relative;
                                  transition: stroke-dashoffset 0.35s, stroke-width 500ms ease-out, stroke 500ms ease-out;
                                  -webkit-transition: stroke-dashoffset 0.35s, stroke-width 500ms ease-out, stroke 500ms ease-out; /* For Safari 3.1 to 6.0 */
                                  transform: rotate(-90deg);
                                  transform-origin: 50% 50%;
                              }
  
                              .currentDay {
                                  font-size: 40%;
                                  overflow: visible;
                                  -webkit-transition: font-size 500ms ease-out; /* For Safari 3.1 to 6.0 */
                                  transition: font-size 500ms ease-out;
                              }
  
                              .daysLeft {
                                  font-size: 40%;
                                  -webkit-transition: font-size 500ms, color 500ms; /* For Safari 3.1 to 6.0 */
                                  transition: font-size 500ms, color 500ms;
                              }
  
                              .description {
                                  font-size: 20%;
                              }
  
  
                              .circle-text {
                                  fill: #000;
                              }
  
                              .progress-ring {
                                  display: block;
                                  position: relative;
                                  margin-left: auto;
                                  margin-right: auto;
                              }
  
                              svg:hover .currentDay {
                                  font-size: 60%;
                              }
  
                              svg:hover .daysLeft {
                                  font-size: 10%;
                              }
  
  
                              svg:hover .progress-ring__circle {
                                  stroke-width: 1;
                                  stroke: #5a64ed;
                              }        
  
                          &lt;/style&gt;
  
                          &lt;svg class="progress-ring" width="100%" height="100%" viewBox="0 0 42 42"&gt;
                              &lt;circle class="progress-ring__circle" stroke="white" fill="transparent" r="15.91549430918954" cx="21" cy="21"&gt;&lt;/circle&gt;
                              &lt;text x="50%" y="53%" class="circle-text" text-anchor="middle"&gt;
                              &lt;tspan class="numbers" x="54%" y="50%"&gt;&lt;tspan class="currentDay"&gt;35&lt;/tspan&gt;&lt;tspan class="daysLeft"&gt;/300&lt;/tspan&gt;&lt;/tspan&gt;
  
                                  &lt;tspan x="50%" y="60%" class="description"&gt;Días Lectivos&lt;/tspan&gt;
                              &lt;/text&gt;
                          &lt;/svg&gt;
  
                      `;
                  }
  
                  constructor() {
                      super();
                  }
  
                      var circle = this.shadowRoot.querySelector('.progress-ring__circle');
                      var radius = circle.r.baseVal.value;
                      var circumference = radiius * 2 * Math.PI;
                      var circleSVG = this.shadowRoot.querySelector('.progress-ring');
  
                      circle.style.strokeDasharray = `${circumference} ${circumference}`;
                      circle.style.strokeDashoffset = `${circumference}`;
  
                      function setProgress(percent) {
                          const offset = circumference - percent / 100 * circumference;
                          circle.style.strokeDashoffset = offset;
                      }
                      setProgress(79);
  
  
  
              }
  
              customElements.define('donut-chart', DonutChart);
  </code></pre>
  
  <p>Here is my original code and what I'm trying to accomplish in the custom element: <a href="https://codepen.io/maganalexis/pen/ePOxYX" rel="nofollow noreferrer">https://codepen.io/maganalexis/pen/ePOxYX</a></p>
  
  <p>Thank you for helping out.</p>