码迷,mamicode.com
首页 > Web开发 > 详细

svg DOM的一些js操作

时间:2014-07-26 16:48:52      阅读:367      评论:0      收藏:0      [点我收藏+]

标签:style   http   java   strong   io   cti   div   ar   

这是第一个实例,其中讲了如何新建svg,添加元素,保存svg document,查看svg.
下面将附上常用一些元素的添加方法:(为js的,但基本上跟java中操作一样,就是类名有点细微差别)

Circle

var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt)
{
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r", 20);
shape.setAttributeNS(null, "fill", "green");
svgDocument.documentElement.appendChild(shape);
}

Ellipse

var svgns = "http://www.w3.org/2000/svg"; 
function makeShape(evt)
{
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "ellipse");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "rx", 20);
shape.setAttributeNS(null, "ry", 10);
shape.setAttributeNS(null, "fill", "green");
svgDocument.documentElement.appendChild(shape);
}

Line

var svgns = "http://www.w3.org/2000/svg"; 
function makeShape(evt)
{ if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "line");
shape.setAttributeNS(null, "x1", 5);
shape.setAttributeNS(null, "y1", 5);
shape.setAttributeNS(null, "x2", 45);
shape.setAttributeNS(null, "y2", 45);
shape.setAttributeNS(null, "stroke", "green");
svgDocument.documentElement.appendChild(shape);
}

Path

var svgns = "http://www.w3.org/2000/svg"; 
function makeShape(evt)
{
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "path");
shape.setAttributeNS(null, "d", "M5,5 C5,45 45,45 45,5");
shape.setAttributeNS(null, "fill", "none");
shape.setAttributeNS(null, "stroke", "green");
svgDocument.documentElement.appendChild(shape);
}

Polygon

var svgns = "http://www.w3.org/2000/svg"; 
function makeShape(evt)
{
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
shape = svgDocument.createElementNS(svgns, "polygon");
shape.setAttributeNS(null, "points", "5,5 45,45 5,45 45,5");
shape.setAttributeNS(null, "fill", "none");
shape.setAttributeNS(null, "stroke", "green");
svgDocument.documentElement.appendChild(shape);
}

Polyline

var svgns = "http://www.w3.org/2000/svg"; 
function makeShape(evt)
{
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
shape = svgDocument.createElementNS(svgns, "polyline");
shape.setAttributeNS(null, "points", "5,5 45,45 5,45 45,5");
shape.setAttributeNS(null, "fill", "none");
shape.setAttributeNS(null, "stroke", "green");
svgDocument.documentElement.appendChild(shape);
}

Rectangle

var svgns = "http://www.w3.org/2000/svg"; 
function makeShape(evt)
{
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "rect");
shape.setAttributeNS(null, "x", 5);
shape.setAttributeNS(null, "y", 5);
shape.setAttributeNS(null, "width", 40);
shape.setAttributeNS(null, "height", 40);
shape.setAttributeNS(null, "fill", "green");
svgDocument.documentElement.appendChild(shape);
}

Rounded Rectangle

var svgns = "http://www.w3.org/2000/svg"; 
function makeShape(evt)
{
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "rect");
shape.setAttributeNS(null, "x", 5);
shape.setAttributeNS(null, "y", 5);
shape.setAttributeNS(null, "rx", 5);
shape.setAttributeNS(null, "ry", 5);
shape.setAttributeNS(null, "width", 40);
shape.setAttributeNS(null, "height", 40);
shape.setAttributeNS(null, "fill", "green");
svgDocument.documentElement.appendChild(shape);
}

Use

var svgns = "http://www.w3.org/2000/svg"; 
var xlinkns = "http://www.w3.org/1999/xlink";
function makeShape(evt)
{
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var svgRoot = svgDocument.documentElement;
var defs = svgDocument.createElementNS(svgns, "defs");
varrect = svgDocument.createElementNS(svgns, "rect"); 
rect.setAttributeNS(null, "id", "rect");
rect.setAttributeNS(null, "width", 15); 
rect.setAttributeNS(null, "height", 15);
rect.setAttributeNS(null, "style", "fill: green");
defs.appendChild(rect);
var use1 = svgDocument.createElementNS(svgns, "use");
use1.setAttributeNS(null, "x", 5);
use1.setAttributeNS(null, "y", 5);
use1.setAttributeNS(xlinkns, "xlink:href", "#
rect");
use2 = svgDocument.createElementNS(svgns, "use");
use2.setAttributeNS(null, "x", 30);
use2.setAttributeNS(null, "y", 30);
use2.setAttributeNS(xlinkns, "xlink:href", "#
rect");
svgRoot.appendChild(defs);
svgRoot.appendChild(use1);
svgRoot.appendChild(use2);
}

svg DOM的一些js操作,布布扣,bubuko.com

svg DOM的一些js操作

标签:style   http   java   strong   io   cti   div   ar   

原文地址:http://www.cnblogs.com/dh-hui/p/3870109.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!