<div class="wrapper">
<div class="svg-container">
  <svg version="1.1" viewBox="0 0 500 100" preserveAspectRatio="xMinYMin meet" class="svg-content">
    
    <defs>
      <marker id="arrow" markerWidth="4" markerHeight="10" viewBox="-2 -4 4 4" refX="0" refY="0" markerUnits="strokeWidth" orient="auto">
        <polyline points="2,-2 0,0 2,2" stroke="#443c3d" stroke-width="0.75px" fill="none"/>
      </marker>
  </defs>
    <g class="box-group">
      <g transform="translate(-5)">
	       <rect fill="#A7C1A6" x="2" y="25" rx="3" ry="3" width="100" height="50" />
      <text x="10" y="47" font-family="Open Sans Condensed" font-size="9" stroke="none" fill="#000000" font-weight="900" style="text-transform:uppercase; letter-spacing: 1px">Risk assessment of 
        <tspan x="10" dy="17">the road network</tspan>
      </g>
       <line x1="125" x2="100" y1="50" y2="50" stroke-width="2" stroke="#443c3d" stroke-dasharray="1,1" marker-start="url(#arrow)"/>
        
      <g transform="translate(125)">
      <rect fill="#c9c9c9" x="2" y="25" rx="3" ry="3" width="100" height="50" />
      <text x="9.5" y="47" font-family="Open Sans Condensed" font-size="9" stroke="none" fill="#000000" font-weight="900" style="text-transform:uppercase; letter-spacing: 1px">Risk assessment of 
        <tspan x="9.5" dy="17">the road network</tspan>
      </text>
      </g>

      <line x1="253" x2="228" y1="50" y2="50" stroke-width="2" stroke="#443c3d" stroke-dasharray="1,1" marker-start="url(#arrow)"/>
      
      <g transform="translate(253)">
      <rect fill="#f3c47b" x="2" y="25" rx="3" ry="3" width="110" height="50" />
      <text x="9.5" y="47" font-family="Open Sans Condensed" font-size="9" stroke="none" fill="#000000" font-weight="900" style="text-transform:uppercase; letter-spacing: 1px">Prioritization of 
        <tspan x="9.5" dy="17">assets in each corridor</tspan>
      </text>
      </g>

      <line x1="390" x2="366" y1="50" y2="50" stroke-width="2" stroke="#443c3d" stroke-dasharray="1,1" marker-start="url(#arrow)"/>
      
      <g transform="translate(390)">
      <rect fill="#c5e0b4" x="2" y="25" rx="3" ry="3" width="110" height="50" />
      <text x="8" y="47" font-family="Open Sans Condensed" font-size="9" stroke="none" fill="#000000" font-weight="900" style="text-transform:uppercase; letter-spacing: 1px">Risk mitigatioin
        <tspan x="8" dy="17"> or adaptation planning</tspan>
      </text>
      </g>
    </g>
	</svg>
</div>
</div>

body {
  background: #f5f3e7;
}

.wrapper {
  padding: 50px 100px;
}

.svg-container { 
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%;
	vertical-align: middle; 
	overflow: hidden; 
  background: #f5f3e7;
}

.svg-content { 
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

// line {
//   //position: relative;
//   z-index: -1;
// }

// rect {
//   //position: relative;
//   z-index: 1;
// }

var svg = document.getElementsByTagName("svg");

var rect = document.getElementsByTagName("rect");

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '10');
text.setAttribute('y', '20');
text.setAttribute('fill', '#000');
text.textContent = 'Hello, I am a blah blah blah blah blah';