Control the end point of an arch with the convertCoordinates method. Is it possible?

[Bjarne Skov]

Is it possible to control the endpoint of an arc with the .

convertCoodinates method?

I'm quite fascinated with the powerful convertCoodinates method and with the help of "akapowl" I finally found out how it works.

I'd like that the endpoint of the green arc at all times is at the endpoint of the redRadius.

 

Any help is appreciated.

 

Bjarne

 

See the Pen PoXZaKM by BYTEaBIT (@BYTEaBIT) on CodePen

[Rodrigo]

Hi,

 

Are you by any chance tying to achieve something like this?

See the Pen GRJEGzB by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Bjarne Skov]

Hi Rodrigo,

 

That piston thing was indeed my inspiration.

I've modified the  CodePen so it looks like what I tried to achieve, but it's a cheat solution.

It looks like I'm drawing the green arch while rotating the redRadius, but it has been there all the time.

I'm just hiding it behind a rectangle, which I push outwards with the convertCoordinates method.

 

Right now I don't think it's possible to control the endpoint of an arch with the convertCoordinates method.

 

 

[akapowl]

Hello again Bjarne.

 

13 hours ago, Bjarne Skov said:

Right now I don't think it's possible to control the endpoint of an arch with the convertCoordinates method.

 

It definitely is - you just need to put in some time, first and formeost to get an understanding of how things work.

I see in your demo, that you tried to do something like this:

 

Arch.setAttribute("x-271", p.x); 
Arch.setAttribute("y700", p.y); 

 

That will not work, because there are no attributes on SVG named "x-271" or "y700".

The attribute you will need to change is the d attribute that has all the path data.

You already found out by yourself that you needed to set the p.x in one place of that path data and the p.y in another - so good job on that 👍

 

Now you will just have to make sure to keep that whole string of the d attribute but only change the values in those places needed.

For that you could either 'break up' the string in the places you need and feed in the numerical values you got in the right spots via concatenation...

 

Arch.setAttribute("d", 'M100, 100 A671 671 0 0 0 ' + p.x + ' ' + p.y); 

 

...or you could use a template literal / template string to achieve basically the same.
 

Arch.setAttribute("d", `M100, 100 A671 671 0 0 0 ${p.x} ${p.y}`); 

 

That would then result in what you probably intended to do, right?

Make sure to have a thorough look at the ressources linked.

Even if they might be overwhelming at first, they will for sure be helpful for you going forward.

See the Pen qBLRrLG by akapowl (@akapowl) on CodePen

[Bjarne Skov]

Hi akapowl,

Concatenation?? - I simply had to look that word up. 

 

Your level of teaching is awesome.

You don't just demonstrate that you master these advanced technics, you also provide links to further reading and learning. 

 

It feels very liberating now to have these powerful tools in my toolbox, although it will take time to digest it all.

I think I've just taken a microscopic quantum leap forward.

 

Thanks

 

Bjarne