<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<meta charset="utf-8" />
</head>
<body>
<div id="contains">
</div>
<!--
折线：
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
路径：
<path d="M250 150 L150 350 L350 350 Z" />
水平渐变的椭圆：
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
放射性渐变的椭圆：
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
当用户在圆上点击时，使用js创建一个元素：
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<script>
function create_a(evt)
{
var SVGDoc=evt.getTarget().getOwnerDocument();
var txt=SVGDoc.getElementById("txt");
var link=SVGDoc.createElement("a");
var text_node=SVGDoc.createTextNode("LINK");
link.setAttributeNS(
"http://www.w3.org/1999/xlink",
"xlink:href",
"http://www.w3schools.com");
link.appendChild(text_node);
txt.appendChild(link);
}
</script>
<text id="txt" x="10" y="10">Click on the circle to create a ....</text>
<circle cx="20" cy="40" r="1.5em" style="fill:blue" onclick="create_a(evt)"/>
</svg>
// 更高效的计时器，类似于setTimeout，不会发生丢
requestAnimationFrameID = window.requestAnimationFrame(doAnim); // Continue calling the doAnim() function.
window.cancelAnimationFrame(requestAnimationFrameID)
// handle multiple browsers for requestAnimationFrame()
window.requestAFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
// if all else fails, use setTimeout
function (callback) {
return window.setTimeout(callback, 1000 / 60); // shoot for 60 fps
};
})();
// handle multiple browsers for cancelAnimationFrame()
window.cancelAFrame = (function () {
return window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.oCancelAnimationFrame ||
function (id) {
window.clearTimeout(id);
};
})();
-->
<script>
function $(id){
return document.getElementById(id);
}
function canvasMap(){
var xmlns = 'http://www.w3.org/2000/svg';
// 创建一条线
// <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
this.createLine = function(options){
return createElement('line', options);
};
// 创建组
// <g></g>
this.createGroup = function(options){
return createElement('g', options);
};
// 创建矩形
// <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
this.createRect = function(options){
return createElement('rect', options);
};
// 创建圆形
// <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
this.createCircle = function(options){
return createElement('circle', options);
};
// 创建路径
// <path d="M250 150 L150 350 L350 350 Z" />
this.createPath = function(options){
return createElement('path', options);
};
// 创建折线
// <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>
this.createPolyline = function(options){
return createElement('polyline', options);
};
// 创建SVG
// <svg width="500" height="500"></svg>
this.createSVG = function(options){
return createElement('svg', options);
};
// 创建三角形
// <polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
this.createPolygon = function(options){
return createElement('polygon', options);
};
// 创建文本节点
// <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24"> It's SVG!</text>
this.createText = function(options){
return createElement('text', options);
}
// 创建元素
function createElement(tag, options){
var node = null;
node = document.createElementNS(xmlns, tag);
for(var op in options){
node.setAttribute(op, options[op]);
}
return node;
}
}
var canvas = new canvasMap();
var root = canvas.createSVG({width:500, height: 500});
$('contains').appendChild(root);
var rect = canvas.createRect({'x':5,'y':5,'rx':5,'ry':5,'width':100,'height':100,'style':'fill:rgb(0,0,255);stroke-width:2;stroke:rgb(0,0,0)'});
root.appendChild(rect);
var circle = canvas.createCircle({'cx':100,'cy':100,'r':20,'style':'fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)'});
root.appendChild(circle);
var polygon = canvas.createPolygon({'points':'200,250 210,280 220,250','style':'fill;#ccc;stroke:#000;stroke-width:2'});
root.appendChild(polygon);
</script>
</body>
</html>
相关推荐
svg转png, svg文件渲染, 使用plutosvg库
史上最全的SVG例子，纯手动整理，很累很辛苦。
1、svg简洁版刻画多人多关系交互，类似于泳道流程图 2、svg动态刻画关系图
矢量格式转换程序，基于JAVA实现的SVG转EMF的的示例代码，下载后导入到eclipse即可运行。
采用C#开发的SVG生成示例，能够有效解决网页地图中大数据量的点加载问题，通过将几十万的点以SVG图片点的方式预先生成后加载到浏览器中进行渲染，从而提高地图显示效率
随便写了几个小例子，想学svg的朋友一看就明白了。很简单，写程序时配合javascrpt一起用
SVG内容简介，配有不错的例子，很适合初学SVG者.
一些svg的小例子交流：wealth_lp@126.com
IOS使用SVGKit库显示svg图demo,并且实现svg图的缩放
鼠标点击,鼠标移走,可以更换图元,都是些简单实用的小例子,有助新手学习.
C#,.net,winform上的用于显示svg，操作svg的源代码，示例代码，代码比较齐全，也比较简单，容易上手。
利用hammer.js操作svg,这是个最简单的拖动svg的效果示例。
本书从指导程序员实际开发应用程序的角度，全面系统地介绍了SVG的核心技术。全书分为3篇。第1篇是SVG开发准备篇，介绍SVG的基本知识以及进行SVG开发所需掌握的准备技术，如XML、CSS、JavaScript等。第2篇是SVG基础...
HTML5 SVG 3D 效果实现示例，附带全部代码
Batik工程的其他目的是使它具有高度的扩展性－－－－举个例子，Batik允许开发者使用自定义的SVG元素。即使工程的目标是提供一系列核心模块，但是还是提供了一个完整的SVG浏览器，以便证实各个模块的有效性和交互性。...
SVG动画 - 前端及有SVG动画需求，html格式可直接用，可以参考其中内容改成其他格式
此代码是利用js操作svg整体缩放的示例，包含简单的网格绘制及滑轮缩放事件。
svg教材示例，其中包括svg语法和关于js的一些动态操作！
代码优化永远是程序员亘古不变的需求，而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环，既然是优化，那我们先来看看SVG图片都有哪些优势： SVG 可被非常多的工具读取和修改（比如记事本）...
整理多个svg的例子，还有IBM的svg教程，很适合与初学者上手。