0
<svg:marker  id="markerSquare1" markerWidth="10" markerHeight="7" refX="4" refY="4"
orient="auto" markerUnits="strokeWidth" style="position: absolute; z-index: 5;">
  <svg:rect  x="1" y="1" width="45" height="45" [attr.fill]="node.options.color" style="position: absolute; z-index: 5;" />
<svg:text    id="markStart" x="1" y="5" font-family="Verdana" font-size="4" fill="red;" >{{label}}</svg:text>
</svg:marker>

 <svg:path
          class="line"
          stroke="#777"
          stroke-width="4"
          marker-start="url(#markerSquare1)"
        marker-end="url(#markerSquare)">
        </svg:path>

my problem is with the internet explore the label of the marker svg does not display as the picture below however with mozilla and chrome works well.

with Internet explorer i get that on IE

with chrome and mozilla i get that with chrome and mozilla i get that

issam zebdi
  • 39
  • 6

1 Answers1

1

Internet Explorer does not render markers with markerUnit="strokeWidth" properly. It is a known bug that they never fixed. It gets the scale wrong and draws the marker way to big.

The dark colour you are seeing is the text being drawn at a massive size. The workaround is to use markerUnit="userSpaceOnUse". And define your markers using userspace units, rather then relative to the line width.

PS. position and z-index are not valid SVG properties. They are doing nothing for you here.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • even with markerUnit="userSpaceOnUse" I can not get the labels in IE because color of the spreads in the maker, to run the strokwith on IE I did that: var parent = p1.parentNode; parent.removeChild(p1); parent.appendChild(p1); – issam zebdi Jul 12 '18 at 13:01
  • Please create a [mcve] and I will take another look. – Paul LeBeau Jul 12 '18 at 13:03