<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>chart</title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } html, body, .view { height: 100%; } .view { display: flex; justify-content: center; align-items: center; background: #000; } .chart { width: 250px; height: 250px; } svg { display: block; width: 100%; height: 100%; } .circle { stroke-linecap: round; transition: all .4s; } </style></head><body> <div class="view"> <div class="chart"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="100" height="100" viewBox="0 0 100 100"> <defs> <linearGradient id="otog" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(235, 107, 3); stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(91, 205, 89); stop-opacity:1" /> </linearGradient> </defs> <text x="26" y="60" fill="url(#otog)" style="font-size: 25px;"> <tspan id="text"></tspan> </text> </svg> </div> </div> <script> var wrap = document.querySelector('svg'); var text = document.getElementById('text'); var pi = Math.PI; var r = 40; var d = 2 * r * pi; var part = d / 8; var sum = part * 5; function dashArray(val) { if(val > 100 || val < 0) return; var cut = state => (state - val) * part / 20 if(val > 80) { return `${part} 5 ${part} 5 ${part} 5 ${part} 5 ${part - cut(100)} ${ d * 3 / 8 - 20 + cut(100) }` } if(val > 60) { return `${part} 5 ${part} 5 ${part} 5 ${part - cut(80)} ${ d / 2 - 15 + cut(80) }` } if(val > 40) { return `${part} 5 ${part} 5 ${part - cut(60)} ${ d * 5 / 8 - 10 + cut(60) }` } if(val > 20) { return `${part} 5 ${part - cut(40)} ${ d * 5 / 3 - 5 + cut(40) }` } return `${part - cut(20)} ${ d * 7 / 8 + cut(20) }` } function createRing(x, y, r, color) { var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); circle.setAttribute('class', 'circle'); circle.setAttribute('cx', x); circle.setAttribute('cy', y); circle.setAttribute('r', r); circle.setAttribute('fill', 'none'); circle.setAttribute('stroke', color); circle.setAttribute('stroke-width', 3); circle.style.strokeDashoffset = - d * 3 / 8 - 5.8; wrap.appendChild(circle); return circle; } var backRing = createRing(50, 50, 40, '#777'); backRing.style.strokeDasharray = dashArray(100); var frontRing = createRing(50, 50, 40, 'url(#otog)'); function setPercent(val) { frontRing.style.strokeDasharray = dashArray(val); text.innerHTML = val + '%'; } setInterval(() => { setPercent(Math.round(100 * Math.random())); }, 1000); </script></body></html> |
用svg实现了一个动画效果 但是用小程序不支持，看了官方文档，用到了很多别的技术，之后有没有对应的API呢 和canvas一样
只知道圈小学生的钱，技术这方面的东西是一点都不做。这个svg好像一年前都在确认需求了， 现在一年了毛都没有
同问，连svg都不支持，真是有点糟心。