收藏
回答

关于小程序之后可以对SVG直接支持吗?

<!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一样

最后一次编辑于  09-04  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏
问题标签