how to stroke "marker-end" of svg path?

I have a SVG path with a marker-end, and I want to stroke both, path and marker-end. The first one is done well, but the marker-end is not stroked by css code. I have tried several times but with no results.

I have tried several ways to stroke the head arrow, including stroking directly the "def" of the svg, adding custom css and class, but none of this worked for me.

The code I used is the given down below:

<html>
<body>
<div id="arrow">
</div>
</body>
</html>

function deg2rad(angle)
{
  return angle*Math.PI/180.0;
}

function windArrow(speed, angle)
{    
  //var angulo = 0;
  var direction = 90-angle;
  // var speed = 20;
  var x = speed*Math.cos(deg2rad(direction)).toFixed(4);
  var y = speed*Math.sin(deg2rad(direction)).toFixed(4);
  var svgHeader = '<svg version="1.1" id="arrow_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" style="enable-background:new 0 0 493.356 493.356;" xml:space="preserve"><defs><marker id="arrowHead" markerWidth="10" markerHeight="10" refX="0" refY="1" orient="auto" markerUnits="strokeWidth"><path fill="white" stroke-width="20" d="M0,0 L0,2 L2,1 z" /><path d="M0,0 L0,2 L2,1 z" fill="red"/></marker></defs>';
  var outerArrow = '<g class="outerArrow"> <path marker-end="url(#arrowHead)" d="M50,50 l'+x.toString()+','+y.toString()+'" /></g>';
  var innerArrow = '<g  class="innerArrow"><path marker-end="url(#arrowHead)" d="M50,50 l'+x.toString()+','+y.toString()+'" /></g>';
  var svgFoot = '</svg>';
  return svgHeader+outerArrow + '\n' + innerArrow + svgFoot;
}
document.getElementById('arrow').innerHTML = windArrow(20,45);

.outerArrow{
    stroke: black;
    stroke-width:6px;
    stroke-linecap:round;
    stroke-linejoin: round;
}
.innerArrow{
    stroke: red;
    stroke-width:2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

I have made a fiddle with an example: https://jsfiddle.net/manespgav/rbua3dhk/

I expect to have the head arrow stroked black, like the straight line of the arrow.

Solution

Well - you can fix this by just inlining the styles

  var svgHeader = '<svg version="1.1" id="arrow_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" ><defs><marker id="arrowHead" markerWidth="10" markerHeight="10" refX="0" refY="1" orient="auto" markerUnits="strokeWidth"><path d="M0,0 L0,2 L2,1 z" stroke="none" fill="red"/><path stroke-width=".3" stroke="black" fill="none" d="M0,0 L0,2 L2,1 z" /></marker></defs>';