各浏览器下的绘图

浏览器支持的绘图:
ie(貌似6+): vml(性能比svg和canvas差)
ff(貌似1.5+): (svg canvas) ff下canvas绘制的图像只能以矩形方式响应事件(貌似是这样)
safari(貌似3+): svg canvas(canvas以绘制的不规则区域响应事件,webkit内核)
chrome(貌似1+): svg canvas(canvas以绘制的不规则区域响应事件,webkit内核)
opera(貌似9+): svg canvas

各地图厂商使用的绘图技术:
google ie(vml) ff和opera(svg) safari和chrome(canvas)
mapbar ie(vml) 其余浏览器(canvas) mapbar解决了svg两个bug,非常不错!!!
mapabc flash
51ditu ie(vml) 其余浏览器(用一像素div拼,这样的问题很明显...性能不好,且没有虚线)

性能排序(canvas(调用浏览器底层的c++绘图api) svg vml,本人瞎猜,请勿相信)


注意:
svg (ff是以边的中心为起点,safari和chrome以边为起点,webkit内核有难缠的bug)
另注意:在svg下,事件响应在path时,offsetParent为空.

注意bug:

bug1:解决方法,viewBox起始不要为负数
bug重现,在safari和chrome下面,使用opacity会导致边框被切(当viewBox有负数,如svgns.setAttributeNS(null,"viewBox","-5 -5 200 200")),被切的距离就是那个负数值(好像也不完全是)
被切示例如下:

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="top:60px;left:60px; overflow: visible; position: absolute;" width="6px" height="93px" viewBox="-3 -3 6 93">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="#0000FF" stroke-width="3px" stroke-dasharray="" d="M 0 0 L 0 87"/>
</svg>

bug2:解决方法,(mapbar的解决方法,目前没看懂)
bug重现,移动svg,左上和右上各有一部分不跟着绘制,并且有残影效果
bug解决(大力感谢mapbar,简直比Google还强!!!),

<marker id="svgArrow" viewBox="0 0 10 10" refX="6" refY="5" markerUnits="strokeWidth" orient="aotu">
<path d="M 0 0 L 10 5 L 0 10 L 4 5 z" fill="#FF0000" fill-opacity="0.6">
</marker>

var spath= document.createElementNS(svgNamespace, "marker");
 svgns.appendChild(spath);
 var mpath=document.createElementNS(svgNamespace, 'path');
 var dp="M 0 0 L 1 1";
 mpath.setAttributeNS(null,"d",dp);
 spath.appendChild(mpath);