svg webtopo原型(1)基本功能

考虑到svg也是html5的标准之一,考虑继续抽空把svgtopo原型移植完。

阻力:已经有webtopology开源包了,实现的功能基本类似

 

参照vml模型的顺序,先实现基本的文本和画线功能。

之前在前期探索中,已经完成了画矩形、画线的探索,包括ie/opera的兼容,中文处理等。因此基本功能还算顺利。

主要实现文本、线条的显示。

以及基本的js操作的简单封装。

兼容ie+asvopera

其中ie使用embed,opera动态创建。

注意:在opera上,如果不指定style,默认的线是看不见的。

测试页面1basic.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>
图例
</title>

<!-- legengd.html
 1.显示文字、线
 2.兼容ie和opera.ie用embed(empty.svg,只包含一个组g1),
  opera用create
-->
</head>
<script type="text/javascript" language="javascript" src=".\js\svg.js"></script>
<script>

</script>

<body bgcolor="#ffffff">



<div id="divsvg">
<embed name="svg1" pluginspage="http://www.adobe.com/svg/viewer/install/" align="top" src="empty.svg" height=10 width=10 type="image/svg+xml">
</div>
</body>
<script>
var svg;
var plat;





function show(){
 //var svg;
 //ie使用embed方式预先加载svg
 svg=initSVG(200,200,1);
 var svgdoc;
 svgdoc=getSVGDocument(svg);
 plat=getrootg(svg,svgdoc);

 //位置为相对位置
 //超出范围会被截掉
 //生成一行文本
 curentStyle="stroke:black;fill:white";
 createText(svgdoc,5,20,"电路带宽图例",curentStyle);
 //生成一个矩形
 curentStyle="stroke:black;fill:green";
 createrect(svgdoc,100,100,3,curentStyle);
 //生成一条线
 curentStyle="stroke:black;fill:none;stroke-width:1";
 createline(svgdoc,0,0,200,0,curentStyle);
 curentStyle="stroke:red;fill:none;stroke-width:3";
 createline(svgdoc,0,0,0,200,curentStyle);
 curentStyle="stroke:blue;fill:none;stroke-width:5";
 createline(svgdoc,0,0,200,200,curentStyle);
 curentStyle="stroke:#3366ff;fill:red;stroke-width:5";
 createline(svgdoc,100,0,100,200,curentStyle);
 }
</script>
</html>


空的svg,只包含一个g1,作为底层。同时设置编码,可以支持中文显示

empty.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >
  
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="g1">

</g>
</svg>

基本封装的svg.js

http://download.csdn.net/detail/luqin1988/5005164

 


 以研究出很多模型,包括跨浏览器移动,缩放,3D,滤镜特效,动画,弹球,绘图,以及多款SVG游戏,如需要请留言。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值