微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

HTML – 在Internet Explorer中打破SVG标记?

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

解决方法

添加笔划:无;在旅游路径风格.像这样:

<svg viewBox="0 0 100 100">
    <defs>
        <marker id="arrow" markerWidth="5" markerHeight="6" refx="5" refy="2" orient="auto">
            <path d="M0,0" style="fill:red; stroke: none;" ></path>
        </marker>
    </defs>

    <path  d="M0,50"
          style="stroke:red; stroke-width: 10px; fill: none;
                 marker-end: url(#arrow);"
    ></path>
</svg>

它在IE-11中运行.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐