【发布时间】：2019-02-28 15:57:52
【问题描述】：
我是 Polymer 的新手，所以我一边开发一边学习。现在我正在使用最新版本，Polymer 3.0。我已经在我正在处理的这个网站上创建了一个可用的首页。当我试图让所有东西都在聚合物上工作时，我被困在让 javascript 工作上。
在原始网站上，我使用的是此代码
index.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);
现在我正在研究 Polymer，我正在为圆环图创建一个自定义元素，但我不知道如何使用或在何处放置使 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
感谢您的帮助。
【问题讨论】：
-
究竟是什么不工作？您的代码有点难以理解，因为有很多内容，显然有些内容被跳过或被截断。我猜您的类中没有 var 在构造函数之后（没有这些行的方法).. 是关于模板迭代在 svg 中呈现多个元素的问题吗？因为如果是这样，我认为这是一个已知问题..
-
javascript 文件中有一个函数可以为 SVG 的 strokeDasharray 和 strokeDashoffset 设置动画。我不应该做的是在 Polymer 自定义元素中使用该功能。
-
请发布您的问题的一个最小示例，或一个实时示例（plunker，jsfiddle）。请记住，在 Polymer 中，您可以使用
{{...}}表示法对值的变化做出反应，并且可以使用事件侦听器观察属性和属性的变化。
标签： javascript polymer shadow-dom custom-element