;
  }

  .arrow.selected {
      stroke-opacity: 0.6;
      stroke-width: 2;
      marker-end: url(#arrowheadSelected);
  }

  .arrowhead {
      orient: auto;
      stroke: none;
      opacity: 0.6;
      fill: blue;
  }
</style>
<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="arrowheadSelected" class="arrowhead" opacity="0.6"
            viewBox="0 0 10 10" refX="3" refY="5"
            markerWidth="4" markerHeight="4">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
    <marker id="arrowhead" class="arrowhead" opacity="0.2"
            viewBox="0 0 10 10" refX="3" refY="5"
            markerWidth="4" markerHeight="4">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
  <g id="arrows" fill="none" stroke="blue" visibility="hidden">