svg DOM的一些js操作

2024-09-06 19:57:08

字體：大中小

來源：轉載

供稿：網友

這是第一個實例,其中講了如何新建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);}