SVG-маркеры сломаны в Internet Explorer?

Question

Этот код SVG отображает стрелку в Firefox и хром, но не работает в интернет-проводник 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> 

Смотрите сами на https://jsfiddle.net/ns3qfau5/6/

Answer 1

Добавить инсульт: нет; в экскурсионном стиле путь:..

<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> 

Он работает в IE-11

Answer 2

IE имеет баг, когда он не поддерживает маркеры, определяются с помощью markerUnits="strokeWidth". Он всегда был, и он не фиксировался до Edge. Это настоящая боль, потому что «strokeWidth» является значением по умолчанию для атрибута markerUnits.

Фактически поддержка IE-маркеров в целом довольно плохая. Существуют и другие ошибки с маркерами (например, см. Ниже).

Единственным обходным путем является использование markerUnits="userSpaceOnUse". Чтобы преобразовать ваше конкретное определение маркера в эту форму, вам нужно умножить все значения маркера на 10, потому что это ширина штриха вашей линии.

<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>

Даже конвертированы, маркер еще не является совершенным - что это то, что я имел в виду других ошибок маркеров в IE. :(