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

Question

我是 Polymer 的新手，所以我边学习边开发。现在我使用的是最新版本 Polymer 3.0。我正在使用的网站上已经有一个可用的首页。当我试图让一切都在 Polymer 上工作时，我被困在让 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

感谢您的帮助。

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