Marker

Defines the graphic that is used for showing some more informative shapes

• Marker are used only with <line> <path> <polyline> <polygon> (or can say, elements, used to create dynamic shapes)
• Used to attach marker to the shapes

• turned_in_notRelated Tag
  • <marker>

• turned_in_notMarker Related Properties
  • marker-start : To add marker at start point
  • marker-mid : To add marker at mid points
  • marker-end : To add marker at end point
  • marker : To add same marker at start, mid and end points

<marker>

Used to provide more information on a shape you draw

Full-Syntax

library_books<marker id="anyId"
        markerHeight="length"
        markerWidth="length"
        markerUnits="strokeWidth|userSpaceOnUse"
        refX="left|center|right|specificPoint" 
        refY="top|center|bottom|specificPoint"
        orient="auto|auto-start-reverse|specificDegree"
        preserveAspectRatio="none|(xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax  meet|slice)"
        viewBox="minX minY width height">
    <!--Your marker design-->
</marker>

• label_outlinemarker Attributes
  • id - To reference the marker
  • markerHeight - The height of marker
  • markerWidth - The width of marker
  • markerUnits - Specify the coordinate system for its attributes (Default : "strokeWidth")
  • refX, refY - The marker reference point along xy-axis (Default : "0")
  • orient - How marker elements are shown on any path or shape (Default : "0")
  • viewBox - Specify which portion of your coordinates are visible within the specified width and height
  • preserveAspectRatio - specify how an element with different aspect ratio provided by viewBox must fit into a viewport

library_books<svg height="100" width="200">
  <defs>
    <!-- arrow marker design -->
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
        markerWidth="5" markerHeight="5" orient="auto">
      <path d="M0 0 L10 5 L0 10 L3 5 z" fill="red" fill-opacity="0.8" />
    </marker>
  </defs>
  <!-- adding marker to a shape or path -->
  <polyline points="20 20, 20 80, 80 80, 80 40" fill="none" stroke="black" stroke-width="3"
   style="marker-start:url(#arrow);marker-mid:url(#arrow);marker-end:url(#arrow);"/>
</svg>