关闭

html页面图形绘制

标签: css地图图形应用
535人阅读 评论(0) 收藏 举报
分类:

最近做地图的一些应用,应用到了图形绘制,头好大啊,刚开始完全不懂vml和svg,做了一阵子,发现了几个窍门:

1、IE浏览器

IE9以下均采用vml

            IE7木有任何问题,但IE8直接不显示。

            查了半天的原因,最后发现是v\:* {BEHAVIOR: url(#default#VML);}没有生效,无奈之下,只好加上

             v\:rect{
BEHAVIOR:url(#default#VML);
}
v\:oval{
BEHAVIOR:url(#default#VML);
}
v\:shape{
BEHAVIOR:url(#default#VML);
}
v\:stroke{
BEHAVIOR:url(#default#VML);
}
v\:fill{
BEHAVIOR:url(#default#VML);
}

          最终才把问题解决了

        IE9及以上均采用svg

IE上木有发现有什么问题

2、谷歌、火狐浏览器

       采用svg

              由于地图可拖动,svg有时候不能够把整个屏幕铺满,导致绘制的图形不能显示完整。后来才用了移动svg位置的方式,使得svg一直铺满整个地图。

     可这样会导致绘制的图形不能随着地图拖动移动,后面看开源gisAPI,发现人家都在绘制的rectangle外面包了两层g。我加上g后直接无法显示绘制图形了。。。

     查了半天,才发现自己创建节点的时候出问题了,js创建svg元素:

document.createElementNS('http://www.w3.org/2000/svg','svg');

      js创建g标签:

document.createElementNS('http://www.w3.org/2000/svg','g');

     最后再将图形元素append到创建的g标签内,这样,就可以完整的显示绘制的图形了。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:7703次
    • 积分:220
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章分类