小编bru*_*uno的帖子

SVG 曲线上的动画选取框

我有一个环绕 SVG 圆圈的文本,该圆圈根据窗口大小进行缩放 - 感谢用户 enxaneta /sf/answers/3922537181/。我想为文本设置动画,使其像选取框一样围绕中心旋转。为此,我的代码目前如下所示:

function Init(){
        let wrap = document.getElementById('wrap');
        let thePath = document.getElementById('thePath');
        let ellipse = document.getElementById('ellipse');
        let w = wrap.clientWidth;
        let h = wrap.clientHeight;
        ellipse.setAttributeNS(null,"viewBox",`0 0 ${w}  ${h}`);
        let d = `M${w/10},${h/2}A${4*w/10},${4*h/10} 0 0 0 ${9*w/10} ${5*h/10} A${4*w/10},${4*h/10} 0 0 0 ${w/10} ${5*h/10}`

    thePath.setAttributeNS(null,"d", d)
    }

    window.setTimeout(function() {
      Init();
      window.addEventListener('resize', Init, false);
    }, 15);

    let so = 0

    function Marquee(){
        let tp = document.getElementById('tp');
          requestAnimationFrame(Marquee)
          tp.setAttributeNS(null,"startOffset",so+"%");
          if(so >= 50){so = 0;}
          so+= .05
        } …
Run Code Online (Sandbox Code Playgroud)

html javascript css svg

6
推荐指数
1
解决办法
841
查看次数

标签 统计

css ×1

html ×1

javascript ×1

svg ×1