html页面图形绘制

原创 2013年12月04日 14:09:56

最近做地图的一些应用,应用到了图形绘制,头好大啊,刚开始完全不懂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标签内,这样,就可以完整的显示绘制的图形了。

相关文章推荐

基于SVG的web页面图形绘制API介绍及编程演示

SVG的全称是可扩展的矢量图形跟传统的Raster方式的图形(JPG, PNG, GIF等)有很大的差别,下面与大家分享下JavaScript中SVG API编程演示,感兴趣的朋友可以参考下哈...

基于SVG的web页面图形绘制API介绍

一:什么是SVG SVG是1999由W3C发布的2D图形描述语言,纯基于XML格式的标记语言,SVG的 全称是可扩展的矢量图形跟传统的Raster方式的图形(JPG, PNG, GIF等)有很大的...

html5 canvas基本图形绘制

该部分简单展示canvas中基本图形的绘制。简单的理解,canvas可以理解为添加一个供js绘图的环境,在其contnetText上通过js代码进行各种绘制。 线段/矩形/圆形/文字/图片/图片旋转...

HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用

原文地址:http://www.jb51.net/html5/72250.html SVG提供了很多的基本形状,这些元素可以直接使用,这一点比canvas好多了,在这里就不多说了,感兴趣的朋友可以了...
  • TTO_OTT
  • TTO_OTT
  • 2015年03月17日 15:49
  • 878

HTML5移动开发(6)——Canvas图形绘制基础

在前面提到Canvas是HTML5中一个重要特点,canvas功能非常强大,用photoshop可以实现的效果canvas也同样可以实现,下面我们用canvas实现基本图形的绘制。 一、Canv...

动态网页图形绘制VML教程HTML版

  • 2009年04月08日 17:18
  • 47KB
  • 下载

[Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较

先介绍一下矢量图的概念: 矢量图使用直线和曲线来描述图形,这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等,它们都是通过数学公式计算获得的。例如一幅花的矢量图形实际上是由线段形成外框轮廓,由外...

HTML5 学习笔记15-Canvas图形绘制处理

1、图形组合 图形组合 function draw() { var canvas=document.getElementBy...

HTML5之SVG 2D入门2 - 图形绘制

基本形状   SVG提供了很多的基本形状,这些元素可以直接使用,这一点比canvas好多了。废话不说了,直接看例子,这个最直接: ...

小强的HTML5移动开发之路(6)——Canvas图形绘制基础

在前面提到Canvas是HTML5中一个重要特点,canvas功能非常强大,用photoshop可以实现的效果canvas也同样可以实现,下面我们用canvas实现基本图形的绘制。 一、Canv...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html页面图形绘制
举报原因:
原因补充:

(最多只允许输入30个字)