这是第一个实例,其中讲了如何新建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操作的更多相关文章

  1. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  2. HTML5的 2D SVG和SVG DOM的学习笔记(1)

    (项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述 可缩放矢量图形(Sc ...

  3. JS操作未跨域iframe里的DOM

    这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴 ...

  4. JS操作DOM对象——JS基础知识(四)

    一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...

  5. js操作DOM对象

    js操作DOM对象  (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...

  6. js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  7. js操作bom和dom

    Bom 概念 BOM : Browser Object Model 浏览器对象模型,描述与浏览器进行交互的方法和接 口, ECMAscript是javascript的核心,但如果要在web中使用jav ...

  8. JS 操作svg画图

    背景: 一共有3个文件:svg文件,html文件,js文件. 有一个svg图,使用embed标签,引入到了html文件中 svg文件: <svg width="640" he ...

  9. 原生JS操作iframe里的dom

    转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...

随机推荐

  1. 我对于MSP的理解,供参考

                                   本人在项目管理圈儿也算是摸爬滚打了几载,近几年真是各种压力大,看同行们各种参加培训.认证......我也不能懈怠啊,赶紧上网搜搜相关的培训 ...

  2. zigbee学习之路(七):定时器3(中断方式)

    一.前言 上次我们学习了了用定时器3进行查询方式来进行溢出判断,今天我们来换一种方式,用中断方式来检测和查询定时器3的溢出. 二.原理与分析 要使用定时器3,我们必须先要配置的是T3CTL,来把定时器 ...

  3. 深入对比数据科学工具箱:Python和R之争

    建议:如果只是处理(小)数据的,用R.结果更可靠,速度可以接受,上手方便,多有现成的命令.程序可以用.要自己搞个算法.处理大数据.计算量大的,用python.开发效率高,一切尽在掌握. 概述 在真实的 ...

  4. CentOS----使用yum命令出现“could not retrieve mirrorlist http://mirrorlist.centos.org ***” - ybq155”

    无聊安装了个mini版的32位的CentOS 6.5,进来想安装个东西,yum install emacs 提示什么 Loaded plugins: fastestmirror, refresh-pa ...

  5. Java精确计算小数

    Java在计算浮点数的时候,由于二进制无法精确表示0.1的值(就好比十进制无法精确表示1/3一样),所以一般会对小数格式化处理. 但是如果涉及到金钱的项目,一点点误差都不能有,必须使用精确运算的时候, ...

  6. 安卓设备通过USB接口读取UVC摄像头权限问题

    libusb for Android================== Building:--------- To build libusb for Android do the following ...

  7. SSH项目Class类的注解与属性的注解

    经过一段日子对SSH的学习,为了有利于随时能熟练的把一个SSH的项目快速的搭建起来,并且在报错的时候,将报错信息和解决 方案记录下来,每天一次的代码练习已成为家常便饭 所以,在反复练习的时候,发现Sp ...

  8. JS js与css的动态加载

    http://www.cnblogs.com/zhuimengdeyuanyuan/archive/2013/03/06/2946277.html

  9. Makefile.am链接openCV库的写法

    6 INCLUDES = `pkg-config opencv --cflags` -I./ 17 bin_PROGRAMS+=SegRecogServerDeme 18 SegRecogServer ...

  10. java 多线程编程三种实现方式

    一种是继承Thread类,一种是实现Runable接口,还有一种是实现callable接口: 有博主说只有前面2种方式,我个人愚见是三种,主要详细介绍下callable的使用: 三种线程的我的个人理解 ...