Shape Vector Points access

Hello !
I would like to modify, in JS function, the points coordinates of a vector shape !
Do you have examples of that ?
Thank you

Hype does not offer access to its svg-ouput via its API.

That said:
the output is regular svg (path) … so you can modify it as you want -> just not with further support of hype

3 Likes

To follow on with this, if you get the element for a vector shape element, then you can get at the individual paths (right now there is only one):

var vectorShapeElement = hypeDocument.getElementById("myShape");
var paths = vectorShapeElement.getElementsByTagName("path");
var firstPath = paths[0];
console.log(firstPath.getAttribute("d")); // print path commands
4 Likes

This forum is a wealth of information : thank you so much for your help !

2 Likes

This is the first time I used SVG and the answer to my question is probably obvious ! Sorry …
This is my project : 20200201 ZVBSN.hype.zip (124.2 KB)

The pb is a the end of the initScene() function
I set a vector path to new 4 points and the results is alway shifted to the right, I don’t understand why !
I set 4 simple colored points to mark the good places

Could you help me ?
Thanks

It’s seems that my viewPort origin is not coincide with the scene origine : I don’t know why ?

20200201 ZVBSN.hype.zip (120.1 KB)

Hype wraps the svg in an additional div-container. that should lead to your difference. so you’ll need to set up equal coordinatespaces to get this running … or do the math to compensate …

It’s look good ! Thank you !
But how did you do that ?! I don’t find any difference in the code …

oh, i took the easy road and changed the coordinatespace by grouping :slight_smile:

For calculating you’ll need to take in account the wrapping div … just have a look to the inspektor and you’ll see :slight_smile:

1 Like

Oh yes ! I see !
Thank you again for your help : a key lesson for me on Hype & SVG !

1 Like