poor content

not useful

useful

very useful

excellent

Rate

January 1, 2022

Alireza Ataei

By: Alireza Ataei

SVG Elliptical Arc relative and absolute parsing

Reading time: 7 min

    Content List

Parameters and the relation between relative and absolute

The Elliptical arc in the path of SVS is identified with ‘A‘ as absolute and ‘a‘ as for relative form of it.

The required awareness of information of the path to convert absolute to relative and vice versa in the Elliptical Arc body, are the starting and ending points
BUT the Starting point of the Elliptical Arc is not in the body of the structure, but the last X and Y that come before the body, and then the ending set of the body, is the Ending point.

The changes required:

  1. You should have already captured and converted the points before the Elliptical Arc body which as mentioned, is the used as starting point
  2. Change the Identifier which is ‘a‘ for relative path and ‘A‘ for absolute
  3. And finally, the Ending point

As for the example above, since we only got a very simple starting point(which doesn’t need to be converted), The only steps left are the (2) and (3).

The step (2) only requires you to replace the a with A.

And step (3) will require you to add the X of the starting point to the X of the endpoint and replace it with the X of endpoint, And the same process for the Y in there.

Absolute: M 50 200 A 100 50 0 1 1 300 250

Relative: M 50 200 a 100 50 0 1 1 250 50

 

Parse the relative to absolute Javascript/node.js

// You need to have the command coordinates separated in order for them to make sense in code

// Initial command: a 100,50 180 0,0 100,50

    const point = [‘a’, 100, 50, 180, 0, 0, 100, 50];
    return ({
        name: ‘A’,
        x1: point[1],
        y1: point[2],
        rotate: point[3],
        large_arc_flag: point[4],
        sweep_flag: point[5],
        x: gx + point[6], // gx: the global x of the path commands before this command
        y: gy + point[7], // gy: the global y of the path commands before this command
    })

The x and y are the only coordinates you need process!

Was this page helpful?

What was the most helpful point of this page for you?

Thanks for your cooperation!

poor content

not useful

useful

very useful

excellent

Comments0

Leave a Reply

Your email address will not be published.