从javascript

Question

在将CSS“百分比”输出集成到CSS中时出现问题。

我是javascript新手，但我无法正常工作...

var number = 65;
var total = 170;
var percentage = (number / total * 100).toFixed(2);
document.getElementById("svgcircle").style.strokeDasharray = percentage;

#svgcircle {
  stroke-width: 5px;
  stroke: red;
  stroke-dasharray: 80, 100;
  stroke-linecap: round;
}

<svg id='svgcircle' height="50" width="50">
        <circle cx="25" cy="25" r="16"/>
    </svg>

Answer 1

stroke-dasharray接受2个参数 <dash-length>, <gap-length>

如果要输出百分比，只需将100放入gap-length

var number = 65;
var total = 170;
var percentage = ((number / total) * 100).toFixed(2);

document.getElementById("svgcircle").style.strokeDasharray = percentage+', '+100; // <<<< add gap-length here

#svgcircle {
    stroke-width: 5px;
    stroke: red;
    stroke-dasharray: 80,100;
    stroke-linecap: round;
 }

<svg id='svgcircle' height="50" width="50">
    <circle cx="25" cy="25" r="16"/>
</svg>