SVG使用示例

标签： svg | 发表时间：2014-04-22 22:40 | 作者：jm1999

出处：http://www.iteye.com

<!DOCTYPE HTML>

<html>

<head>

<title> New Document </title>

</head>

<body>

</div>

<!--

折线：

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"

style="fill:white;stroke:red;stroke-width:2"/>

路径：

水平渐变的椭圆：

<defs>

</linearGradient>

</defs>

<ellipse cx="200" cy="190" rx="85" ry="55"

style="fill:url(#orange_red)"/>

放射性渐变的椭圆：

<defs>

</radialGradient>

</defs>

<ellipse cx="230" cy="200" rx="110" ry="100"

style="fill:url(#grey_blue)"/>

当用户在圆上点击时，使用js创建一个元素：

xmlns="http://www.w3.org/2000/svg">

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>

</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);

};

})();

-->

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>

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

SVG使用示例

相关 [svg] 推荐：

了解SVG

SVG的用法

SVG使用示例

SVG动画入门

理解SVG的viewport，viewBox，preserveAspectRatio

【转载】SVG是什么？SVG有什么用途？

【转载】比较html5、GML、SVG、VML

jQuery矢量SVG地图插件JVectorMap

未来必热：SVG Sprite技术介绍

五项Web技术：WebGL和SVG名列其中

相关文章

订阅