- 浏览: 48040 次
- 性别:
- 来自: 北京
最新评论
-
hanxiao84322:
强大啊,虽然没有完全看明白。
YUI 3.0应用初探 -
osacar:
不行啊。没效果!在Opera下测试
IE也不行。
JS iframe跨域自适应内容高度 -
xxzjzb1:
中秋送礼,首选书画、艺术品交易平台爱艺购!
JS将数字转换成三位逗号分隔的样式 -
mozart0:
货币:num.toFixed(2).replace(/(\d) ...
JS将数字转换成三位逗号分隔的样式 -
cnxxg:
这样能处理一个元素含有多个classname的情况吗?
javascript 整合的获取ID,className,tagName的方法
如何在html中操作SVG对象的问题,对于嵌入式<embed name="id1" id='svgId' type='image/svg+xml' src="./test.svg" height="200" width="500"></embed>的可以通过document.getElementById('svgId'). getSVGDocument();的方法得到SVG Doc对象,但此方法存在两个问题:一是opera不支持getSVGDocument方法,二是对于动态创建的embed对象并不会马上被呈现,从而无法立刻得到SVGDocument对象,下面的方法会出错
var body=document.getElementsByTagName('body')[0];
var svg=document.createElement("embed");
svg.setAttribute("id",id);
svg.setAttribute("type",'image/svg+xml');
svg.setAttribute("width",'100%');
svg.setAttribute("height",'100%');
svg.setAttribute("src",'a.svg');//这里必须输入svg源
body.appendChild(svg);
var svgdoc=svg.getSVGDocument();//在IE下出错,原因可能是svg虽然被加到了body中,但需要Adobe的SVG插件去绘制,所以不能立刻得到SVGDocument
embed嵌入还存在一个问题,需要存在一个如下的空SVG文件
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
现在的解决方法是对与IE还是使用embed的方式(最好的是VML),对于其他浏览器,SVG标签和其他标签一样创建,使用下面的方法创建了一个SVG 对象和一个矩形,并添加到body标签下
var svg=document.createElementNS('http://www.w3.org/2000/svg','svg');
svg.setAttribute("height",'100%');
svg.setAttribute("width",'100%');
var rect=document.createElementNS('http://www.w3.org/2000/svg','rect');
rect.setAttribute("id","rect");
rect.setAttribute("x",0);
rect.setAttribute("y",0);
rect.setAttribute("width",200);
rect.setAttribute("height",200);
rect.setAttribute("fill",'red');
svg.appendChild(rect);
var body=document.getElementsByTagName('body')[0];
body.appendChild(svg);
对于IE的解决办法现在是放在setTimeout()中执行,最佳方案是VML
//emptySVG.svg
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
//svg.html
<html>
<head>
<title>test</title>
<script language=javascript >
var twConstants=
{
DIALECT_SVG:'svg',
DIALECT_VML:'vml',
NS_SVG:'http://www.w3.org/2000/svg',
NS_XLINK:'http://www.w3.org/1999/xlink'
}
var isIE=false;
function checkBrowser(){
return navigator.appName == "Microsoft Internet Explorer";
}
isIE=checkBrowser();
function getSVGDocument(svg){
var result=null;
if(isIE){
if(svg.tagName.toLowerCase()=="embed"){
try{
result=svg.getSVGDocument();
}catch(e){
alert(e+" may be svg embed not init");
}
}
}else{
result=svg.ownerDocument;
}
return result;
}
function getSVGRoot(svg,doc){
if(svg.tagName.toLowerCase()=="embed"){
if(doc){
return doc.documentElement;
}else{
return getSVGDocument(svg).documentElement;
}
}else if(svg.tagName.toLowerCase()=="svg"){
return svg;
}return null;
}
//空SVG文件路径
var emptySVGSrc="./twaver/emptySVG.svg";
//在Html中创建一个SVG节点,指定id,父亲节点,对于IE创建<embed />,其他浏览器创建<SVG />
function createSVG(id,parent){
var svg;
if(isIE){
svg=document.createElement("embed");
svg.setAttribute("id",id);
svg.setAttribute("type",'image/svg+xml');
svg.setAttribute("src",emptySVGSrc);
}else {
svg=document.createElementNS(twConstants.NS_SVG,'svg');
}
svg.setAttribute("width",'100%');
svg.setAttribute("height",'100%');
parent.appendChild(svg);
if(isIE){
doLater(
function(svg){
var svgdoc=getSVGDocument(svg);
var svgRoot=getSVGRoot(svg,svgdoc);
svgRoot.setAttribute("height",'100%');
svgRoot.setAttribute("width",'100%');
},100,svg);
}
return svg;
}
//得到SVGDocument
function getSVGDocument(svg){
var result=null;
if(isIE){
if(svg.tagName.toLowerCase()=="embed"){
try{
result=svg.getSVGDocument();
}catch(e){
alert(e+" may be svg embed not init");
}
}
}else{
result=svg.ownerDocument;
}
return result;
}
//得到SVG根结点
function getSVGRoot(svg,doc){
if(svg.tagName.toLowerCase()=="embed"){
if(doc){
return doc.documentElement;
}else{
return getSVGDocument(svg).documentElement;
}
}else if(svg.tagName.toLowerCase()=="svg"){
return svg;
}return null;
}
//扩展setTimeout方法,实现延时执行
function doLater(callback,timeout,param)
{
var args = Array.prototype.slice.call(arguments,2);
var _cb = function()
{
callback.apply(null,args);
}
setTimeout(_cb,timeout);
}
//______测试代码_______
var svg;
var addRect=function(svg){
var svgdoc=getSVGDocument(svg);
var svgRoot=getSVGRoot(svg);
var rect=svgdoc.createElementNS(twConstants.NS_SVG,'rect');
rect.setAttribute("id","rect2");
rect.setAttribute("x",10);
rect.setAttribute("y",10);
rect.setAttribute("width",200);
rect.setAttribute("height",200);
rect.setAttribute("fill",'red');
svgRoot.appendChild(rect);
}
function call(){
var body=document.getElementsByTagName('body')[0];
svg=createSVG('svgid',body);
/**
//如果创建SVG对象后马上添加SVGElement,对于IE需要延时执行
if(isIE){
doLater(function(svg){
addRect(svg);
},100,svg);
}else{
addRect(svg);
}
**/
}
function showmsg()
{
//这里不需要延时执行,因为这里是在按钮点击事件中,SVG已经初始化
addRect(svg);
}
</script>
</head>
<body onload='call()'>
<input type='button' onclick='{showmsg();}' value='ok' />
</body>
</html>
SVG支持用<path> 标签用来定义图形的路径
var body=document.getElementsByTagName('body')[0];
var svg=document.createElement("embed");
svg.setAttribute("id",id);
svg.setAttribute("type",'image/svg+xml');
svg.setAttribute("width",'100%');
svg.setAttribute("height",'100%');
svg.setAttribute("src",'a.svg');//这里必须输入svg源
body.appendChild(svg);
var svgdoc=svg.getSVGDocument();//在IE下出错,原因可能是svg虽然被加到了body中,但需要Adobe的SVG插件去绘制,所以不能立刻得到SVGDocument
embed嵌入还存在一个问题,需要存在一个如下的空SVG文件
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
现在的解决方法是对与IE还是使用embed的方式(最好的是VML),对于其他浏览器,SVG标签和其他标签一样创建,使用下面的方法创建了一个SVG 对象和一个矩形,并添加到body标签下
var svg=document.createElementNS('http://www.w3.org/2000/svg','svg');
svg.setAttribute("height",'100%');
svg.setAttribute("width",'100%');
var rect=document.createElementNS('http://www.w3.org/2000/svg','rect');
rect.setAttribute("id","rect");
rect.setAttribute("x",0);
rect.setAttribute("y",0);
rect.setAttribute("width",200);
rect.setAttribute("height",200);
rect.setAttribute("fill",'red');
svg.appendChild(rect);
var body=document.getElementsByTagName('body')[0];
body.appendChild(svg);
对于IE的解决办法现在是放在setTimeout()中执行,最佳方案是VML
//emptySVG.svg
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
//svg.html
<html>
<head>
<title>test</title>
<script language=javascript >
var twConstants=
{
DIALECT_SVG:'svg',
DIALECT_VML:'vml',
NS_SVG:'http://www.w3.org/2000/svg',
NS_XLINK:'http://www.w3.org/1999/xlink'
}
var isIE=false;
function checkBrowser(){
return navigator.appName == "Microsoft Internet Explorer";
}
isIE=checkBrowser();
function getSVGDocument(svg){
var result=null;
if(isIE){
if(svg.tagName.toLowerCase()=="embed"){
try{
result=svg.getSVGDocument();
}catch(e){
alert(e+" may be svg embed not init");
}
}
}else{
result=svg.ownerDocument;
}
return result;
}
function getSVGRoot(svg,doc){
if(svg.tagName.toLowerCase()=="embed"){
if(doc){
return doc.documentElement;
}else{
return getSVGDocument(svg).documentElement;
}
}else if(svg.tagName.toLowerCase()=="svg"){
return svg;
}return null;
}
//空SVG文件路径
var emptySVGSrc="./twaver/emptySVG.svg";
//在Html中创建一个SVG节点,指定id,父亲节点,对于IE创建<embed />,其他浏览器创建<SVG />
function createSVG(id,parent){
var svg;
if(isIE){
svg=document.createElement("embed");
svg.setAttribute("id",id);
svg.setAttribute("type",'image/svg+xml');
svg.setAttribute("src",emptySVGSrc);
}else {
svg=document.createElementNS(twConstants.NS_SVG,'svg');
}
svg.setAttribute("width",'100%');
svg.setAttribute("height",'100%');
parent.appendChild(svg);
if(isIE){
doLater(
function(svg){
var svgdoc=getSVGDocument(svg);
var svgRoot=getSVGRoot(svg,svgdoc);
svgRoot.setAttribute("height",'100%');
svgRoot.setAttribute("width",'100%');
},100,svg);
}
return svg;
}
//得到SVGDocument
function getSVGDocument(svg){
var result=null;
if(isIE){
if(svg.tagName.toLowerCase()=="embed"){
try{
result=svg.getSVGDocument();
}catch(e){
alert(e+" may be svg embed not init");
}
}
}else{
result=svg.ownerDocument;
}
return result;
}
//得到SVG根结点
function getSVGRoot(svg,doc){
if(svg.tagName.toLowerCase()=="embed"){
if(doc){
return doc.documentElement;
}else{
return getSVGDocument(svg).documentElement;
}
}else if(svg.tagName.toLowerCase()=="svg"){
return svg;
}return null;
}
//扩展setTimeout方法,实现延时执行
function doLater(callback,timeout,param)
{
var args = Array.prototype.slice.call(arguments,2);
var _cb = function()
{
callback.apply(null,args);
}
setTimeout(_cb,timeout);
}
//______测试代码_______
var svg;
var addRect=function(svg){
var svgdoc=getSVGDocument(svg);
var svgRoot=getSVGRoot(svg);
var rect=svgdoc.createElementNS(twConstants.NS_SVG,'rect');
rect.setAttribute("id","rect2");
rect.setAttribute("x",10);
rect.setAttribute("y",10);
rect.setAttribute("width",200);
rect.setAttribute("height",200);
rect.setAttribute("fill",'red');
svgRoot.appendChild(rect);
}
function call(){
var body=document.getElementsByTagName('body')[0];
svg=createSVG('svgid',body);
/**
//如果创建SVG对象后马上添加SVGElement,对于IE需要延时执行
if(isIE){
doLater(function(svg){
addRect(svg);
},100,svg);
}else{
addRect(svg);
}
**/
}
function showmsg()
{
//这里不需要延时执行,因为这里是在按钮点击事件中,SVG已经初始化
addRect(svg);
}
</script>
</head>
<body onload='call()'>
<input type='button' onclick='{showmsg();}' value='ok' />
</body>
</html>
SVG支持用<path> 标签用来定义图形的路径
发表评论
-
YUI3 事件
2011-04-23 20:02 1530YUI3:事件 YUI的事件功能为响应DOM事件提供一个简单 ... -
直接运行html的代码
2010-12-07 17:19 852function runCode(pTargetId){ v ... -
JS正则表达式详解
2010-10-28 10:12 921JS的正则表达式 //校验是否全由数字组成 代码 va ... -
如何在事件代理中正确使用 focus 和 blur 事件
2010-10-21 22:09 1595什么是事件代理(Event Delegation)? 如果不 ... -
如何判断脚本加载完成
2010-10-21 22:04 924在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一 ... -
JavaScript 获取事件对象的一个注意点
2010-10-21 22:00 909平时我们获取事件对象一般写法如下: function get ... -
判断 iframe 是否加载完成的完美方法
2010-10-21 21:52 916var iframe = document.createEle ... -
JS将数字转换成三位逗号分隔的样式
2010-08-02 16:33 3762function formatNumber(num){ ... -
YUI 3.0应用初探
2010-06-04 22:42 1312很惭愧。。。YUI3出来这么久了,一直都没有机会正式使用。。这 ... -
JS iframe跨域自适应内容高度
2010-02-24 11:05 2771<!DOCTYPE html PUBLIC " ... -
话说browser的脚本并行下载
2009-12-12 13:32 1332在讨论这次的主题 ... -
初涉YUI3
2009-12-11 13:44 1136study.html <!DOCTYPE HTML ... -
基於YUI2.8的 JS版多文件上传
2009-12-11 12:41 921select files: uploading: ... -
自定义滚动条
2009-11-12 19:42 952<!DOCTYPE html PUBLIC " ... -
javascript 整合的获取ID,className,tagName的方法
2009-11-12 19:40 2536var get=function(className, tag ... -
javascript 中绑定事件监听的函数【支持数组对象绑定】
2009-11-12 19:38 1178var addEventHandler=function(ob ... -
判断指定对象是否存在于另一个对象的原型链中
2009-11-12 19:35 958prototype 下的 isPrototypeOf() 方法 ... -
基于yui3如何写模块(一)
2009-11-12 19:33 930如今的前端开发越来越oo,也越来越注重重用,娴熟的用js写出o ... -
Js 数组排序【支持对象】
2009-11-12 19:30 1074//兼容 IE&FF&Safari var ... -
如何避免Javascript事件绑定出现内存泄漏
2009-11-12 19:02 1174Javascript绑定事件时,只要DOM的事件里访问不了DO ...
相关推荐
15.4.svg 使用JavaScript操作SVG。 Calculate.java 计算浮点数运算结果的Applet。 Calculate.class Calculate.java的字节码文件。 Calculate1.java 计算浮点数运算结果并调用页面中JavaScript函数的...
SVGComic 是一个基于动态 SVG 的 Webcomic 生成 JavaScript 引擎。 用法 您将 svg-comic.js 脚本包含到您的 SVG 中,将 onload="main(evt)" 添加到您的 SVG 标签,然后为您的代码创建一个新的 SCRIPT 块。 有关建议...
另外,SVG文件还可嵌入JavaScript(严格地说,应该是ECMAScript)脚本来控制SVG对象 * SVG图形格式可以方便的创建文字索引,从而实现基于内容的图像搜索 * SVG图形格式支持多种滤镜和特殊效果,在不改变图像内容的...
1.2.4 在javascript中使用json / 4 1.2.5 在.net中使用json / 8 1.2.6 在java中使用json / 12 1.2.7 更多有关json的信息 / 15 1.3 ext js 4概述 / 15 1.4 ext js的开发工具的获取、安装与配置介绍 / 18 1.4.1...
第 1 章 JavaScript 是什么...............................................1 3 1.1 历史简述..............................................1 1.2 JavaScript 实现................................................
动态创建数据库 SQL Server数据库安全规划全攻略 .net通用数据库访问组件SQL Artisan应用简介1 在Framework1.0下同时连接SqlServer和Oracle的一些体会 XML XPath XPath最通俗的教程(ZZ) XPath中相对路径和绝对路径...
在现代的浏览器中使用 SVG 技术进行图形绘制,在低版本 IE 则使用 VML 进行图形绘制。 free非商业使用免费 在个人网站、学校网站及非盈利机构中使用 Highstock 完全不需要经过我们的许可,直接可以任意使用! 商业...
在现代的浏览器中使用 SVG 技术进行图形绘制,在低版本 IE 则使用 VML 进行图形绘制。 free非商业使用免费 在个人网站、学校网站及非盈利机构中使用 Highstock 完全不需要经过我们的许可,直接可以任意使用! 商业...
Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。 Highcharts 支持的图表类型有直线...
\19.3 使用JavaScript操作Qt对象 463 \19.4 基于Prototype的继承 467 \19.5 小结 467 \第20章 国际化 468 \20.1 Unicode与字符编码 468 \20.1.1 Unicode 468 \20.1.2 汉字编码 469 \20.1.3 编码转换 469 \20.2 Qt ...
\19.3 使用JavaScript操作Qt对象 463 \19.4 基于Prototype的继承 467 \19.5 小结 467 \第20章 国际化 468 \20.1 Unicode与字符编码 468 \20.1.1 Unicode 468 \20.1.2 汉字编码 469 \20.1.3 编码转换 469 \...
或者,使用相同的数据创建具有平滑过渡和交互作用的交互式SVG条形图。D3不是试图提供所有可能功能的整体框架。相反,D3解决了问题的症结:基于数据的文档有效处理。这避免了专有表示,并提供了非凡的灵活性,从而...
DIMO知识图可视化 DIMO数据库跟踪数字世界和物理世界之间的连接。 我们的Graph可视化功能使您可以比以往更快地使用此信息来设计和... 空间特征在后台加载SVG,以将对象链接到地理位置,或在图形上强制执行结构。 创建
JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件,提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接...
6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用...
6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用...
JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件,提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接...
JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件,提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接...
JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件,提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接...