gpt4 book ai didi

html - SVG:在弧形中插入图像

转载 作者:行者123 更新时间:2023-12-04 09:46:47 25 4
gpt4 key购买 nike

所以我有一个用 SVG 编写的“进度弧”。使用以下 CSS 规则在弧上绘制进度:

--percent: 30;
stroke-dashoffset: calc(436 - (var(--percent) * 436 / 100));

enter image description here

我想在进度弧的末尾放置一个指示器(以红色显示),但如何确定插入图像的位置?

谢谢

最佳答案

为了计算指标的位置,您可以使用 getPointAtLength()像这样的方法:

请阅读我的代码中的注释。

// the center of the progress arc
let c= {x:0,y:90}
// the radius of the progress arc
let r = 70;
// the starting and the ending angle for the progress arc
let a1 = -210 * Math.PI / 180;
let a2 = 30 * Math.PI / 180;
// the starting point for the progress arc
let p1 = {
x: c.x+r*Math.cos(a1),
y: c.y+r*Math.sin(a1)
}
// the ending point for the progress arc
let p2 = {
x: c.x+r*Math.cos(a2),
y: c.y+r*Math.sin(a2)
}
//the value of the d attribute for the base (silver) and the arc (red)
let d = `M${p1.x}, ${p1.y}A${r},${r},0 1 1 ${p2.x}, ${p2.y}`;
base.setAttributeNS(null,"d",d);
arc.setAttributeNS(null,"d",d);


let percent = 30;
//the total length of the arc and the base
//also the value used for the stroke-dasharray
let sda = arc.getTotalLength();
//the value for the stroke-dashoffset
let sdo = sda - (percent*sda/100);
//set the "stroke-dasharray" and the "stroke-dashoffset" for the arc
arc.setAttributeNS(null,"stroke-dasharray",sda);
arc.setAttributeNS(null,"stroke-dashoffset",sdo);


//calculate the position for the indicator: a golden point in this case
let p = arc.getPointAtLength(percent*sda/100)
img.setAttributeNS(null,"cx",p.x);
img.setAttributeNS(null,"cy",p.y);
svg{border:solid;width:300px}
<svg viewBox="-100 0 200 150">
<path id="base" fill="none" stroke="silver" stroke-width="8" stroke-linecap ="round" />
<path id="arc" fill="none" stroke="red" stroke-width="8" stroke-linecap ="round" />

<circle id="img" r="2" fill="gold"/>
</svg>

关于html - SVG:在弧形中插入图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62083255/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com