Open In App

HTML marker-end Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

The marker-end attribute draws a polymarker or arrowhead at the last vertex of a given shaped markable element. Except for polyline and path, the first vertex is the same as the last vertex for all the markable elements. In this case, if the value of both marker-start and marker-end is not “none”, then both the markers will be rendered on the last vertex. The marker-end property is only rendered on the last vertex of the path data. The marker-mid property has its effect only on the following seven elements which are path, polyline, polygon, line, circle, ellipse, and rect.

Syntax:

marker-end = "marker-reference | none"

Attribute values: This attribute accepts two values as mentioned above and described below.

  • marker-reference: It draws a marker at the last vertex of elements.
  • none: It does not add any marker at the last vertex of the element.

Example 1: Below is the code which illustrates the use of marker-end property with the value of marker-reference.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <div class="Container" style=" 
         color: green; text-align: center;">
        <h1>GeeksforGeeks</h1>
        <svg width="600px" height="100px">
            <defs>
                <marker id="arrow" markerWidth="10" 
                    markerHeight="10" refX="0" 
                    refY="3" orient="auto"
                    markerUnits="strokeWidth">
                    <path d="M0, 0 L0, 6 L9, 3 z" 
                            fill="#006400" />
                </marker>
            </defs>
            <line x1="150" y1="50" x2="450" y2="50" 
                stroke="#000" stroke-width="5" 
                marker-end="url(#arrow)" />
        </svg>
    </div>
</body>
  
</html>


Output:

Example 2: Below is the code which illustrates the use of marker-end property with value “none”.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <div class="Container" style="
        color: green; text-align:center;">
  
        <h1>GeeksforGeeks</h1>
        <svg width="600px" height="100px">
            <defs>
                <marker id="arrow" markerWidth="10"
                    markerHeight="10" refX="0" 
                    refY="3" orient="auto"
                    markerUnits="strokeWidth">
                    <path d="M0, 0 L0, 6 L9, 3 z" 
                        fill="#006400" />
                </marker>
            </defs>
            <line x1="150" y1="50" x2="450" y2="50" 
                stroke="#000" stroke-width="5" 
                marker-end="none" />
        </svg>
    </div>
</body>
  
</html>


Output:

Supported Browsers:

  • Firefox
  • Chrome
  • Safari
  • Edge
  • Opera


Last Updated : 14 Sep, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads