如何修复 MS Edge 中的 SVG 标记方向？

Question

尝试使用 Mozilla Docs 中的基本示例，但顶部箭头方向不正确（仅在 Ms Edge 浏览器中）：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/orient

有什么方法可以针对该浏览器修复它吗？

Answer 1

显然 orient="auto-start-reverse" 在 edge 中不起作用，因此您需要使用 orient="auto"。为此，我使用了 2 行，而不是 polyline，原点在 10,90

svg{width:300px}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
        markerWidth="6" markerHeight="6"
        orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>

    <marker id="dataArrow" viewBox="0 0 10 10" refX="5" refY="5"
        markerWidth="6" markerHeight="6"
        orient="-65deg">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
    </marker>
  </defs>




  <line x1="10" y1="90" x2="90" y2="90" fill="none" stroke="black"
      marker-end="url(#arrow)" marker-end="url(#arrow)" />
  <line x1="10" y1="90" x2="10" y2="10" fill="none" stroke="black"
      marker-end="url(#arrow)" marker-end="url(#arrow)" />
  
  <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey"
      marker-start="url(#dataArrow)" marker-mid="url(#dataArrow)"
      marker-end="url(#dataArrow)" />
</svg>

看到这支笔：https://codepen.io/AmeliaBR/details/qjXoQd

"auto-start-reverse SVG marker ...... Doesn't work in Edge/IE (and other older browsers) and doesn't fallback nicely (you get a non-rotating marker instead)."

如何修复 MS Edge 中的 SVG 标记方向？

How to fix SVG marker orientation in MS Edge?

svg

microsoft-edge