Skip to content
Related Articles

Related Articles

HTML marker-end Attribute
  • Last Updated : 14 Sep, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



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

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Supported Browsers:

  • Firefox
  • Chrome
  • Safari
  • Edge
  • Opera

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :