svg DOM的一些js操作

这是第一个实例,其中讲了如何新建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");

 

    var rect = 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);

}

评论

2 楼 tuposky 2014-08-18  

请教楼主，怎么在line 或 Circle 里面加一个title

1 楼 tuposky 2014-08-18  

good...真全