CSS：如何更改圆笔画填充角度（从左填充而不是从右填充）答案

【问题标题】：CSS: How to change circle stroke filling angel (fill from the left not right)CSS：如何更改圆笔画填充角度（从左填充而不是从右填充）
【发布时间】：2020-07-17 07:56:25
【问题描述】：

我正在尝试使用此代码从左到右绘制一个圆圈的笔划

jsfiddle

这是我现在正在处理的短代码

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300" preserveAspectRatio="none" style="width:300; height:300; top:0; left:0;">
  <circle cx="100" cy="100" r="57" id="grey-halo" fill="none" stroke="#dddddd" stroke-width="15" transform="rotate(-90,100,100)" />
<circle cx="100" cy="100" r="57" id="green-halo" fill="none" stroke="#00CC33" stroke-width="15" stroke-dasharray="0,20000" transform="rotate(-90,100,100)"  />

(function () {
var circle = document.getElementById('green-halo');
var interval = 30;
var angle = 0;
var angle_increment = 6;
var max_angle = 265;

window.timer = window.setInterval(function () {
    circle.setAttribute("stroke-dasharray", angle + ", 20000");
    circle.setAttribute("stroke", "rgb(80, 80, 80)");

    if (angle >= max_angle) {
        window.clearInterval(window.timer);
    }
    angle += angle_increment;
  }.bind(this), interval);
})()

我想从左到右而不是从右到左绘制这部分笔划。如何才能做到这一点？您可以编辑原始小提琴并提及更改。提前致谢。

【问题讨论】：

您应该更改transform in circle 标签
请解释一下。我很感激。

标签： css animation rotation

【解决方案1】：

调整转换

(function () {
    // math trick 2*pi*57 = 358, must be less than 360 degree 
    var circle = document.getElementById('green-halo');
    var myTimer = document.getElementById('myTimer');
    var interval = 30;
    var angle = 0;
    var angle_increment = 6;
    var max_angle = parseInt(Math.random()*360);

    window.timer = window.setInterval(function () {
        circle.setAttribute("stroke-dasharray", angle + ", 20000");
        circle.setAttribute("stroke", "hsl(" + parseInt(angle/360*100) + ", 90%, 45%)");
        myTimer.innerHTML = parseInt(angle/360*100) + '%';
        myTimer.setAttribute("fill", "hsl(" + parseInt(angle/360*100) + ", 90%, 45%)");

        if (angle >= max_angle) {
            window.clearInterval(window.timer);
        }
        angle += angle_increment;
    }.bind(this), interval);
})()

#green-halo {
  transform:scaleX(-1) rotate(-90deg);
  transform-box:fill-box;
  transform-origin:center;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300" preserveAspectRatio="none" style="width:300; height:300; top:0; left:0;">
      <circle cx="100" cy="100" r="57" id="grey-halo" fill="none" stroke="#dddddd" stroke-width="15" transform="rotate(-90,100,100)" />
    <circle cx="100" cy="100" r="57"  id="green-halo" fill="none" stroke="#00CC33" stroke-width="15" stroke-dasharray="0,20000" />
    <text id="myTimer" text-anchor="middle" x="100" y="110" fill="#00CC33" style="font-size: 36px;" >0%</text>
</svg>

【讨论】：

非常感谢，非常感谢。