svg DOM的一些js操作
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操作的更多相关文章
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- HTML5的 2D SVG和SVG DOM的学习笔记(1)
(项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述 可缩放矢量图形(Sc ...
- JS操作未跨域iframe里的DOM
这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴 ...
- JS操作DOM对象——JS基础知识(四)
一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...
- js操作DOM对象
js操作DOM对象 (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...
- js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- js操作bom和dom
Bom 概念 BOM : Browser Object Model 浏览器对象模型,描述与浏览器进行交互的方法和接 口, ECMAscript是javascript的核心,但如果要在web中使用jav ...
- JS 操作svg画图
背景: 一共有3个文件:svg文件,html文件,js文件. 有一个svg图,使用embed标签,引入到了html文件中 svg文件: <svg width="640" he ...
- 原生JS操作iframe里的dom
转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...
随机推荐
- php入门
最近公司招了几个应届毕业生,他们对前端的了解还挺多,但是对后端的技术一无所知,我觉得,作为一个前端攻城狮,如果你有远大的抱负,就应该雨露均沾... 今天我就跟大家讲一讲PHP最基本的入门,至少别人问起 ...
- redis安装与基本配置
获取下载包 wget http://download.redis.io/releases/redis-2.8.24.tar.gz 解压和编译 tar -zxvf redis-2.8.24.tar.gz ...
- (转)建站知识:域名/ 空间/ IP/ 端口之间的关系
先说域名解析吧,比如说你的域名是 www.sunnymould.com,这个域名对应着一个IP地址,域名解析就是把上面的域名转换成这个IP地址的过程,这样你就可以域名访问了上面地址上的内容了. 端口映 ...
- 高宽不定的div相对父div上下、左右居中
<div class="parent"> <div class="child">123</div> </div> ...
- JS中的各种类型转换规则(转)
JS中的类型转换非常恶心,大家都懂的,不过该学还是要学. 今天看犀牛书看到了转换规则,总结出来. X转字符串.数字.布尔值 X表示各种类型的值,直接上图: 值 转数字 转字符串 转布尔值 undefi ...
- Eclipse 修改API
真机调试时报错,提示application api 21,device api 10 Automatic Target Mode: Unable to detect device compatibil ...
- linux SVNUP显示无法连接主机
今天开发环境中突然无法连接主机了,我就想到 1.更改svn 链接地址,发现不可取,工程中的每个目录下面都有个.svn文件,修改起来麻烦: 2.建立新文件夹,重新checkout,发现还是无法链接 最后 ...
- 控制反转(IOC: Inverse Of Control) & 依赖注入(DI: Independence Inject)
举例:在每天的日常生活中,我们离不开水,电,气.在城市化之前,我们每家每户需要自己去搞定这些东西:自己挖水井取水,自己点煤油灯照明,自己上山砍柴做饭.而城市化之后,人们从这些琐事中解放了出来,城市中出 ...
- Innodb引擎 compact模式下元组的磁盘存储结构
可变字符串长度:可变字符串长度: null vector 元组头(5个字节) 主键 trx id (6个字节) rollback pointer( 7个字节 ) 可变字符串 可变字符串 有了这个后 ...
- mousedown(function(){ return false; })作用
mousedown(function(){ return false;}); 阻止浏览器的默认行为. 比如a你加个空连接,可能会在当前页跳转, 你加了这句,就可以阻止a跳转,然后只执行js函数的代 ...