SVG Line and Arrow

HTML

<svg xmlns="http://www.w3.org/2000/svg"   overflow="visible" width="100%" height="100%" >
<defs>
 <marker id='head' orient="auto"
    markerWidth='2' markerHeight='4'
    refX='0.1' refY='2'>
    <!-- triangle pointing right (+x) -->
    <path d='M0,0 V4 L2,2 Z' />
  </marker>
</defs>

    
<g>
    <line id="tick-0" x1="20" y1="20" x2="120" y2="20" stroke="black" stroke-width="2" stroke-linecap="round" marker-end='url(#head)'/>
    <text x="20" y="20" font-size="1" fill="black" text-anchor="start" font-family="Verdana, sans-serif">FRED</text>
  </g>
    
<path
  id='Test'
  marker-end='url(#head)'
  fill='none' stroke='red'  
  d='M0,0 H150'
  />
<path
  id='Test'
  marker-end='url(#head)'
  stroke-width='2'
  fill='green' stroke='red'  
  d='M75,0 V20'
  />


    
<path
  id='arrow-line0'
  stroke-width='1'
    stroke-linecap='round'
  fill='none' stroke='black'  
  d='M30,0 V10'
  />
<path
  id='arrow-line1'
  marker-end='url(#head)'
  stroke-width='1'
    stroke-linecap='round'
  fill='none' stroke='black'  
  d='M29.5,10 L0,10 V20'
  />    
<path
  id='arrow-line2'
  marker-end='url(#head)'
  stroke-width='1'
    stroke-linecap='round'
  fill='none' stroke='black'  
  d='M29.5,10 H50 V20'
  />
<path
  id='arrow-line3'
  marker-end='url(#head)'
  stroke-width='1'
  fill='none' stroke='black'  
  d='M50,10 H100 V20'
  />
    
 
</svg>

    
<h2>Footing</h2>

CSS

body{font-family:arial;}
.box {
        height: 40px;
        width:160px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        background-color:#3079CF;
        -webkit-box-shadow: 2px 2px 2px 2px #999999;
        box-shadow: 2px 2px 2px 2px #999999;
        padding:6px;
        margin-bottom:10px;
}
.value {
        margin-top:5px;
        float:right;
        height: 30px;
        width:80px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background-color:#F8F8FF;

}

.label {
    float:left;
    margin-top:10px;
    text-align:centre;
}