Polymer 3.0 自定义元素 - 如何使用 JavaScript 与 SVG 交互

Question

我是聚合物新手，所以我在开发的同时学习。现在我使用的是最新版本，Polymer 3.0。我已经在这个网站上有一个工作首页，我正在工作。当我试图让一切都在聚合物上工作时，我被困在让javascript工作上。

在原始站点上，我使用此代码

索引.html

<div class="year-overview">
<div class="ano-lectivo">
<svg class="progress-ring" width="50%" height="50%" opacity="0" viewBox="0 0 42 42">
<circle class="progress-ring__circle" stroke="white" fill="transparent" r="15.91549430918954" cx="21" cy="21"></circle>
<text x="50%" y="53%" class="circle-text" text-anchor="middle">
<tspan class="currentDay">35</tspan>
<tspan class="daysLeft">/ 300</tspan>
<tspan x="50%" y="60%">Días Lectivos</tspan>
</text>
</svg>
</div>

这是javascript文件：

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);

现在我正在研究聚合物，我正在为圆环图创建一个自定义元素，但我不知道如何使用或在哪里放置使 strokeDasharray 和 strokeDashoffset 正常工作的函数：

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class DonutChart extends PolymerElement {
static get template() {
return html`
<style>
.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;
}        
</style>
<svg class="progress-ring" width="100%" height="100%" viewBox="0 0 42 42">
<circle class="progress-ring__circle" stroke="white" fill="transparent" r="15.91549430918954" cx="21" cy="21"></circle>
<text x="50%" y="53%" class="circle-text" text-anchor="middle">
<tspan class="numbers" x="54%" y="50%"><tspan class="currentDay">35</tspan><tspan class="daysLeft">/300</tspan></tspan>
<tspan x="50%" y="60%" class="description">Días Lectivos</tspan>
</text>
</svg>
`;
}
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);

这是我的原始代码以及我试图在自定义元素中完成的内容：https://codepen.io/maganalexis/pen/ePOxYX

谢谢你的帮助。

Answer 1

在阅读了大量文档后，我找到了解决方案，我不得不调用 ready 方法并将我的代码放在它下面：

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class DonutChart extends PolymerElement {
static get template() {
return html`
<style>
.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;
}        
</style>
<svg class="progress-ring" on-load="circleCircus" width="100%" height="100%" viewBox="0 0 42 42">
<circle class="progress-ring__circle" stroke="white" fill="transparent" r="15.91549430918954" cx="21" cy="21"></circle>
<text x="50%" y="53%" class="circle-text" text-anchor="middle">
<tspan class="numbers" x="54%" y="50%"><tspan class="currentDay">[[progressNum]]</tspan><tspan class="daysLeft">[[totalNum]]</tspan></tspan>
<tspan x="50%" y="60%" class="description">[[lowDescription]]</tspan>
</text>
</svg>
`;
}
static get properties() {
return {
progressNum: {
type: Number
},
totalNum: {
type: String
},
lowDescription: {
type: String
}
};
}
constructor() {
super();
}


ready(){
super.ready();
var circle = this.shadowRoot.querySelector('.progress-ring__circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
var circleSVG = this.shadowRoot.querySelector('.progress-ring'); //For changing the opacity and not showing the circle before it loads
var proNum = `${this.progressNum}`;
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(proNum); }, 2000); //Changin the value in order to animate
}

}
customElements.define('donut-chart', DonutChart);