SVG画图的测试

最新推荐文章于 2022-08-29 17:42:18 发布

iteye_16125

最新推荐文章于 2022-08-29 17:42:18 发布

阅读量205

点赞数

文章标签： jQuery Adobe CSS HTML ViewUI

本文链接：https://blog.csdn.net/iteye_16125/article/details/81931145

版权

-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

iteye_16125

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SVG画图的测试

-by Alex以前放另外一个地方的一些笔记，先整理在javaeye里[备份]SVG构建复杂操作界面的测试2009-04-05 21:57 (分类:默认分类)SVG是ADOBE提供的一个结构化矢量图构建的东西近期因某项目中要增加一个非常复杂的展示界面，Js不能直接支持绘图比较郁闷所以对SVG做了个简单测试客户端需要安装Adobe的SVG插件...
复制链接

扫一扫