在Internet Explorer中打破SVG标记？

这SVG代码显示在Firefox和Chrome的箭头，但在Internet Explorer 11已破坏：在Internet Explorer中打破SVG标记？

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

来源

2017-02-08 Swiss Mister

迂腐点评：作为引用您的标记没有ID，所以我很惊讶，它的工作原理。>。<。。。jsfiddle does –

Thanks @OwenBeresford - fixed now。I ended up using http://jsplumbtoolkit.com/ btw ... –

添加行程：无;在游览路径的风格是这样的：。

<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

来源

2017-02-09 15:13:29

这是正确的答案！根据开发控制台，它甚至可以降低到9.谢谢你Serhij！ –

瑞士人没问题。 –

IE浏览器有它不支持标记一个错误，定义为markerUnits="strokeWidth"。它始终有，直到Edge才得到修复。这是一个真正的痛苦，因为“strokeWidth”是markerUnits属性的默认设置。

事实上，IEs对标记的支持通常很糟糕。还有其他的标记错误（例如见下文）。

唯一的解决方法是使用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之外的标记错误。 :(

来源

2017-02-09 03:08:23

感谢Paul！你是对的 - 然而，我并不那么挑剔实现这个箭头的方式：有没有比这个“标记”功能更好的方法？我不是一个SVG专家。我只想要一个可以通过javascript轻松操作的直线箭头。任何建议欢迎！ –

标记是显而易见的方法。但是你也可以选择自己添加箭头。 –

我知道这将是一个单独的问题，我不知道如何甚至说出它：是否有可能参数化一个SVG arrrow（即没有标记），然后给它两个坐标开始和结束？ –

在Internet Explorer中打破SVG标记？

回答

相关问题