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>