Raphael（拉斐尔）画箭头的一些用法

Raphael，很多人都喜欢用这个，因为它具有更好的兼容性。本人也喜欢用这个插件进行图形的绘制。下面来看一个实例：

首先画出两个箭头

这个时候在IE浏览器下，没有任何问题。那么我们用谷歌打开一下同样的页面。

   

看出问题了吗？由于绿色的箭头是迟于红色箭头实例的，所以箭头会被后者的颜色所覆盖，造成这种难看的样式。

那么应该如何解决的呢？​先来看一下如何实例这个箭头，相信很多人还不了解。

​那么箭头的问题解决了，如何来解决颜色的覆盖问题呢？

通过调试，我了解到了一个svg的运行原理​，Raphael为这个箭头的marker-end属性设置了一个引用地址url(#raphael-marker-endclassic55)，这个是classic-wide-long属性自己生成的，而这个“raphael-marker-endclassic55”就存在于svg画布中。

于是我在body标签中强制插入了两个箭头对象。并且为它们都设置了颜色。

​那么剩下的就是如何改变Raphael为我设置的箭头地址"raphael-marker-endclassic55"了。辗转了半天，终于找到了方法。

​为两条线强制设置marker-end的值。将url重新指定。最终得到正确的效果。

附页面代码：

$(function () {

            // 在坐标（10,50）创建宽320，高200的画布

            var paper = Raphael(0, 0, 3200, 2000);

            var line1 = paper.path("M100,200 L 200,400").attr({

                stroke: "red",

                "stroke-width": "2px",

                "arrow-end": "classic-wide-long"

            });

            var line2 = paper.path("M500,200 L 600,400").attr({

                stroke: "green",

                "stroke-width": "2px",

                "arrow-end": "classic-wide-long"

            });

            if (Raphael.svg) {

                line1.node.attributes["marker-end"].value = "url(#raphael-marker-endclassic-" + "red" + ")";

                line2.node.attributes["marker-end"].value = "url(#raphael-marker-endclassic-" + "green" + ")";

            }

        });

  <svg>
    <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
    <marker id="raphael-marker-endclassic-red" markerHeight="5" markerWidth="5" orient="auto" refX="2.5" refY="2.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><use xmlns:xlink="" xlink:href="#raphael-marker-classic" transform="rotate(180 2.5 2.5) scale(1,1)" stroke-width="1.0000" fill="red" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use></marker>
    <marker id="raphael-marker-endclassic-green" markerHeight="5" markerWidth="5" orient="auto" refX="2.5" refY="2.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><use xmlns:xlink="" xlink:href="#raphael-marker-classic" transform="rotate(180 2.5 2.5) scale(1,1)" stroke-width="1.0000" fill="green" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use></marker>
    </defs>
    </svg>