SVG markers broken in internet explorer?

问题:

This svg code displays an arrow in firefox and chrome, but is broken in internet explorer 11:

<svg viewBox="0 0 100 100">

    <defs>
      <marker id="arrow" markerWidth="5" markerHeight="6" refx="5" refy="2" orient="auto">
        <path d="M0,0 L0,4 L5,2.5 L5,1.5 L0,0" style="fill:red;" ></path>
      </marker>
    </defs>

    <path d="M0,0 L50,50"
        style="stroke:red; stroke-width: 10px; fill: none;
           marker-end: url(#arrow);"
    ></path>

  </svg> 

See it yourself at https://jsfiddle.net/ns3qfau5/6/

回答1:

Add the stroke: none; in tour path style. Like this:

<svg viewBox="0 0 100 100">
    <defs>
        <marker id="arrow" markerWidth="5" markerHeight="6" refx="5" refy="2" orient="auto">
            <path d="M0,0 L0,4 L5,2.5 L5,1.5 L0,0" style="fill:red; stroke: none;" ></path>
        </marker>
    </defs>

    <path  d="M0,0 L50,50"
          style="stroke:red; stroke-width: 10px; fill: none;
                 marker-end: url(#arrow);"
    ></path>
</svg>

It's working in IE-11.

回答2:

IE has a bug where it doesn't support markers that are defined with markerUnits="strokeWidth". It always has, and it didn't get fixed until Edge. This is a real pain because "strokeWidth" is the default setting for the markerUnits attribute.

In fact IEs support of markers is pretty bad in general. There are other bugs with markers also (eg. see below).

The only workaround is to use markerUnits="userSpaceOnUse" instead. To convert your particular marker definition to that form, you have to multiply all your marker values by 10, because that is the stroke width your line has.

<svg viewBox="0 0 100 100">

  <defs>
    <marker id="arrow" markerWidth="50" markerHeight="60" refx="50" refy="20" orient="auto" markerUnits="userSpaceOnUse">
      <path d="M0,0 L0,40 L50,25 L50,15 L0,0" style="fill:red;" ></path>
    </marker>
  </defs>

  <path  d="M0,0 L50,50"
         style="stroke:red; stroke-width: 10px; fill: none;
                marker-end: url(#arrow);"
  ></path>

</svg>

Even converted, the marker still isn't perfect - which is what I meant by other marker bugs in IE. :(