CODEWITHSUNDEEP
svg
El Anonimo
El Anonimo

Reputation: 1870

Attach circle to svg circle dash

I need to attach a circle to the end of a svg circle dash as shown on the pic below. Could make the dash beginning and end on http://jsfiddle.net/q3wb6gkq/ round with stroke-linecap="round". Now how do I go about attaching a circle to its end?

enter image description here

Upvotes: 1

Views: 110

Answers (1)

enxaneta
enxaneta

Reputation: 33034

To the svg I'm adding a small circle for the thumb.

I'm calculating the position of the last point of the dash on the circle using getPointAtLength.

I'm setting the values of the cx and cy attributes of the thumb using setAttribute

Please observe that I'm wrapping both the circle and the thumb in a group <g> and apply the transformation to the group.

//the value of the stroke-dasharray attribute
let sda = Number(c.getAttribute("stroke-dasharray"));
//the value of the stroke-dashoffset attribute
let sdo = Number(c.getAttribute("stroke-dashoffset"));

let l = sda - sdo;
//get the position of a point at the end of the dash
let p = c.getPointAtLength(l);
//set the values of the cx and cy attributes of the `#thumb` circle
thumb.setAttribute("cx",p.x);
thumb.setAttribute("cy",p.y);
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g  transform="rotate(270, 80, 80)">
    <circle id="c" r="70" cy="80" cx="80" stroke-width="8" stroke="#6fdb6f" fill="none" stroke-dasharray="440" stroke-dashoffset="150" />
    <circle id="thumb" fill="red" r="6" />
</g>
</svg>

Upvotes: 2

Related Questions