SVG画图的测试

httpclient_bd

浏览: 74196 次
性别:
来自: 北京

最近访客更多访客>>

joenali550

hanyi366

xaofeixa

lingyunfuyu1

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery Adobe CSS HTML

-by Alex
以前放另外一个地方的一些笔记，先整理在javaeye里

[备份]SVG构建复杂操作界面的测试
2009-04-05 21:57 (分类:默认分类)
SVG是ADOBE提供的一个结构化矢量图构建的东西

近期因某项目中要增加一个非常复杂的展示界面，Js不能直接支持绘图比较郁闷

所以对SVG做了个简单测试

客户端需要安装Adobe的SVG插件

svg绘图的各种标记就不详细说了， SVG本身是W3C的规范，因此所有对W3C标准的操作均能够应用于SVG

在jQuery的插件集里找到了一个对SVG支持的plugin，以下是示例代码


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

     "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jQuery SVG Basics</title>

<script type="text/javascript" src="jquery-1.3.1.js"></script>

<script type="text/javascript" src="jquery.svg.js"></script>

<script type="text/javascript">

$(function() {

$('#svgbasics').svg({onLoad: drawInitial});

$('button').click(drawShape);

});

 

function drawInitial(svg) {

 

}

 

function test(evt) {

alert(evt.target.id);

}

function drawShape() {

var shape = this.id;

var svg = $('#svgbasics').svg('get');

if (shape == 'rect') {

//svg.rect(20, 50, 100, 50, 10, 10, {fill: 'yellow', stroke: 'navy', 'stroke-width': 5},{});

for (var i= 0; i < 10; i++) {

var obj = svg.other(null, 'rect', {x : 5, y : 20 * i, width:150, height:20, fill: 'yellow', stroke: 'navy'});

obj.addEventListener('click', test, false);

obj.setAttribute('id', 'id_'+ i );

obj.setAttribute('style', 'cursor:hand');

}

for (var i= 0; i < 10; i++) {

var obj = svg.other(null, 'rect', {x : 155, y : 20 * i, width:150, height:20, fill: 'red', stroke: 'navy'});

obj.addEventListener('click', test, false);

obj.setAttribute('id', 'id_'+ (10 + i) );

obj.setAttribute('style', 'cursor:hand');

}

}

}

</script>

<style type="text/css">

@import "jquery.svg.css";

 

#svgbasics {

width: 400px;

height: 300px;

border: 1px solid #484;

}

</style>

</head>

<body>

<div id="svgbasics"></div>

<p><button id="rect">Add rectangle</button></p>

</body>

</html>

网上jQuery svg原版文档里没有提供对js事件支持的介绍，这段代码里增加了事件支持。对于其余的绘制方法，参考原文档http://keith-wood.name/svg.html

分享到：