Place arrow head triangles on SVG lines - HTML CSS SVG

HTML CSS examples for SVG:Line

  1. HOME
  2. HTML CSS
  3. SVG
  4. Line

Description

Place arrow head triangles on SVG lines

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--  ww w  .  j a  v  a 2  s. co  m-->
 <body> 
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="-50 -100 200 200"> 
   <defs> 
    <marker id="mid" orient="auto" markerwidth="2" markerheight="4" refx="0.1" refy="1"> 
     <path d="M0,0 V2 L1,1 Z" fill="orange" /> 
    </marker> 
    <marker id="head" orient="auto" markerwidth="2" markerheight="4" refx="0.1" refy="2"> 
     <path d="M0,0 V4 L2,2 Z" fill="red" /> 
    </marker> 
   </defs> 
   <polyline id="arrow-line" marker-mid="url(#mid)" marker-end="url(#head)" stroke-width="5" fill="none" stroke="black" points="0,0 20,20 40,40 60,20 80,0" /> 
  </svg>  
 </body>
</html>

Related Tutorials