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>