Path

Contents

Path#

A path is an element that can be used to create complex shapes, such as a series of lines, curves, and arcs.

Arc#

An arc is a segment of an ellipse. In path commands, the A/a commands corresponds to the arc. The arc commands are supposed to be used with the following syntax:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

  • rx ry: the radius of the ellipse wich section is taken.

  • x y/ dx dy: defines the point where the current arc ends.

  • x-axis-rotation the rotation fo the ellipce.

  • large-arc-flag: there are two ellipses that mark the start and end points of the arc, this parameter defines arc from which ellipce will be used.

  • sweep-flag: There are two possible sections that can be taken from each ellipse. This flag defines which section will be taken.

The following cell shows an ellipse and the simple arc that corresponds to it.

%%HTML
<svg 
width="400" height="200"
fill="none"
>
    <ellipse
        cx="100" cy="60"
        rx="100" ry="50"
        transform="rotate(-45 150 75)"
        stroke="black"
        stroke-width="7"
    />

    <path d="M 93 45 A 100 50 -45 0 1 182 45" stroke="red" stroke-width="3"/>
</svg>

Rotation#

The third argument of the A command defines how the ellipse, which is the prototype for the arc, will be rotated.

The following cell shows arcs that are rotated at different angles.

%%HTML
<svg
width="300" height="100"
xmlns="http://www.w3.org/2000/svg"
stroke="black" 
fill="none"
stroke-width="5"
>
    <path d="M 0 70 a 10 30 0 0  1 40 0" />
    <path d="M 50 70 a 10 30 20 0 1 40 0" />
    <path d="M 100 70 a 10 30 40 0 1 40 0" />
    <path d="M 150 70 a 10 30 60 0 1 40 0" />
    <path d="M 200 70 a 10 30 80 0 1 40 0" />
</svg>
Contents