站内
搜索
=波波日志 > Canvas/VML/SVG > svg DOM的一些js操作=

[转]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);
}

摘自：http://blog.sina.com.cn/s/blog_55205e230100aq0w.html
类别：Canvas/VML/SVG　作者：转载　日期：2009-07-01　【评论：0】　
上一篇：SVG主要元素和属性 　
下一篇：svg+js+path直线的拖动与缩放
 
暂时没有评论！
发表留言
  • *昵称：
  • 头像：
  • 电子邮件：　[留下您的邮件，方便管理员回复您。]
  • 个人网站：　*验证码：
声明：本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载或引用的作品侵犯了您的权利,请通知我们，我们会及时删除!
Powered by showbo，©2012WEB编程网，桂ICP备05005887号　京公网安备1101055090