Internet Explorer 中的 SVG 标记损坏？答案

【问题标题】：SVG markers broken in internet explorer?Internet Explorer 中的 SVG 标记损坏？
【发布时间】：2017-06-26 17:55:45
【问题描述】：

此 svg 代码在 Firefox 和 chrome 中显示一个箭头，但在 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/

【问题讨论】：

pedantry 评论：您引用的标记没有 id，所以我很惊讶它可以工作。 >.
感谢@OwenBeresford - 现已修复。我最终使用了jsplumbtoolkit.com btw...

标签： html internet-explorer svg

【解决方案1】：

在游览路径样式中添加stroke: none;。像这样：

<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 中工作。

【讨论】：

这是正确答案！根据开发控制台，它甚至可以降到 ie 9。谢谢 Serhij！
瑞士没问题。

【解决方案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 中其他标记错误的意思。 :(

【讨论】：

谢谢保罗！你是对的 - 这可以解决问题。但是：我对实现这个箭头的方式并不那么挑剔：有没有比这个“标记”功能更好的方法？我不是 SVG 方面的专家。我只想要一个可以通过 javascript 轻松操作的直箭头。欢迎提出任何建议！
标记是显而易见的方式。但您也可以选择自己添加箭头。
我知道这将是一个单独的问题，我什至不知道如何措辞：是否可以参数化一个 SVG 箭头（即没有标记），然后给它两个坐标开始并结束？
是的，但您显然需要使用 Javascript。例如，请参阅this question。