Related Articles

Related Articles

HTML marker-start Attribute
  • Last Updated : 13 Sep, 2020

The marker-start attribute draws a polymarker or arrowhead at the start vertex of the given shaped markable element. Except 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 are not “none”, then both markers will be rendered on the last vertex. The marker-start property is rendered only on the start vertex of the path data. The marker-mid property has its effect only on the following seven elements: path, polyline, polygon, line, circle, ellipse, and rect.

Syntax:

 marker-start = "marker-reference | none"

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

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

Example 1: Below is the code which illustrates the use of marker-start property with the value “none.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        .geeks {
            stroke-width: 15;
            stroke: green;
            fill: none;
            marker-start: none;
        }
    </style>
</head>
  
<body>
    <div class="Container" style="
        color: green; text-align:center;">
  
        <h1>GeeksforGeeks</h1>
        <svg>
            <marker id="Triangle" 
                viewBox="0 0 10 10" refX="0" 
                refY="5" orient="auto">
                <path d="M 0 0 L 10 5 L 0 10 z">
                </path>
            </marker>
            <g class="geeks">
                <path d="M 100, 75 C 125, 
                    50 150, 50 175, 75">
                </path>
            </g>
        </svg>
    </div>
</body>
  
</html>

chevron_right


Output:



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

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        .geeks {
            stroke-width: 10;
            stroke: green;
            fill: none;
        }
    </style>
</head>
  
<body>
  
    <div class="Container" style="
         color: green; text-align:center;">
        <h1>GeeksforGeeks</h1>
        <svg>
            <marker id="Triangle" 
                viewBox="0 0 10 10" refX="0" 
                refY="5" orient="auto">
                <path d="M 0 0 L 10 5 L 0 10 z">
                </path>
            </marker>
            <g class="geeks" style=
                "marker-start: url(#Triangle);">
                  
                <path d="M 100, 75 C 
                    125, 50 150, 50 175, 75">
                </path>
            </g>
        </svg>
    </div>
</body>
  
</html>

chevron_right


Output:

Supported Browsers:

  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :