在Internet Explorer中破坏SVG标记？ [英] SVG markers broken in internet explorer?

问题描述

这个svg代码在firefox和chrome中显示一个箭头，但在Internet Explorer 11中被破坏：

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> 

自己看
https://jsfiddle.net/ns3qfau5/6/

推荐答案

在巡视路径样式中添加 stroke：none; 。像这样：

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>

它在IE-11中工作。

It's working in IE-11.

这篇关于在Internet Explorer中破坏SVG标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！