• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

6. Paths > The marker element

The marker element

Let us presume the following path, which uses a line, an elliptical arc, and another line to draw the rounded corner in Figure 6-15:

<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"
    style="fill: none; stroke: black;"/>
Lines and arc
Figure 6-15. Lines and arc

We’d like to mark the direction of the path by putting a circle at the beginning, a solid triangle at the end, and arrowheads at the other vertices, as shown in Figure 6-16. To achieve this effect, we will construct three <marker> elements and tell the <path> to reference them.

Lines and arc with markers
Figure 6-16. Lines and arc with markers

Let’s start with Example 6-5, which adds the circular marker. A marker is a “self-contained” graphic with its own private set of coordinates, so you have to specify its


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint