- 浏览: 49623 次
- 性别:
- 来自: 北京
最新评论
-
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 1593YUI3:事件 YUI的事件功能为响应DOM事件提供一个简单 ... -
直接运行html的代码
2010-12-07 17:19 894function runCode(pTargetId){ v ... -
JS正则表达式详解
2010-10-28 10:12 983JS的正则表达式 //校验是否全由数字组成 代码 va ... -
如何在事件代理中正确使用 focus 和 blur 事件
2010-10-21 22:09 1637什么是事件代理(Event Delegation)? 如果不 ... -
如何判断脚本加载完成
2010-10-21 22:04 969在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一 ... -
JavaScript 获取事件对象的一个注意点
2010-10-21 22:00 979平时我们获取事件对象一般写法如下: function get ... -
判断 iframe 是否加载完成的完美方法
2010-10-21 21:52 979var iframe = document.createEle ... -
JS将数字转换成三位逗号分隔的样式
2010-08-02 16:33 3797function formatNumber(num){ ... -
YUI 3.0应用初探
2010-06-04 22:42 1372很惭愧。。。YUI3出来这么久了,一直都没有机会正式使用。。这 ... -
JS iframe跨域自适应内容高度
2010-02-24 11:05 2801<!DOCTYPE html PUBLIC " ... -
话说browser的脚本并行下载
2009-12-12 13:32 1392在讨论这次的主题 ... -
初涉YUI3
2009-12-11 13:44 1178study.html <!DOCTYPE HTML ... -
基於YUI2.8的 JS版多文件上传
2009-12-11 12:41 968select files: uploading: ... -
自定义滚动条
2009-11-12 19:42 987<!DOCTYPE html PUBLIC " ... -
javascript 整合的获取ID,className,tagName的方法
2009-11-12 19:40 2568var get=function(className, tag ... -
javascript 中绑定事件监听的函数【支持数组对象绑定】
2009-11-12 19:38 1214var addEventHandler=function(ob ... -
判断指定对象是否存在于另一个对象的原型链中
2009-11-12 19:35 993prototype 下的 isPrototypeOf() 方法 ... -
基于yui3如何写模块(一)
2009-11-12 19:33 959如今的前端开发越来越oo,也越来越注重重用,娴熟的用js写出o ... -
Js 数组排序【支持对象】
2009-11-12 19:30 1117//兼容 IE&FF&Safari var ... -
如何避免Javascript事件绑定出现内存泄漏
2009-11-12 19:02 1212Javascript绑定事件时,只要DOM的事件里访问不了DO ...
相关推荐
3. **交互性**:利用WinCC的脚本功能,可以编写VBScript或JavaScript代码,与SVG对象进行交互。例如,根据变量值的变化改变SVG的颜色、形状或者显示隐藏。 4. **动画效果**:通过编程,可以实现SVG对象的动画效果,...
总的来说,使用JavaScript动态操作SVG文档是创建动态和交互式图形的重要手段。通过深入理解SVG的DOM结构、JavaScript脚本的放置以及浏览器的特定API,开发者可以创造出丰富多样的SVG应用,包括游戏、数据可视化和...
这可以通过在Vue模板中直接嵌入SVG代码,或者通过JavaScript动态操作DOM来实现。在本文档中,推荐的实现方式是使用`Vue.extend()`来创建Vue实例,从而动态地挂载SVG内容。 1. **使用`Vue.extend()`方法**:这是Vue...
在这个场景中,我们关注的是使用JavaScript来创建SVG(可缩放矢量图形)实现的工作流程图。SVG是一种基于XML的图形语言,能够生成高质量、可交互的矢量图像,尤其适合于网页和应用程序中的动态图形。 JavaScript是...
4. **动画与动态效果**:通过JavaScript,你可以创建SVG元素的动画效果。例如,使用`requestAnimationFrame`或CSS的`@keyframes`规则,可以实现平滑的SVG动画。 5. **性能优化**:由于SVG是矢量图形,即使放大也...
通过创建这些上下文对象,你可以控制SVG元素的生成过程,比如添加交互性或者根据运行时的数据动态改变图形。 6. **SVG到CSS和JavaScript的转换**: Batik还提供了`CSSGenerator`和`JSGenerator`,可以将SVG转换为...
- **动画**:使用`requestAnimationFrame`和属性动画,JavaScript可以实现SVG元素的动态效果。 - **SMIL动画**:SVG还支持内建的SMIL(Synchronized Multimedia Integration Language)动画,但JavaScript可以更...
SVG与JavaScript(JS)的交互是Web开发中的一个重要方面,因为它允许开发者创建动态且可交互的图形界面。SVG的元素和属性可以被JavaScript访问和修改,从而实现复杂的交互动画和用户界面。 1. SVG基础知识 SVG元素...
在本项目中,“使用svg动态生成12份圆”指的是利用SVG的特性,通过编程方式创建一个包含12个圆形的SVG图像,并且这些圆形可以通过标签进行控制,同时支持传入参数来改变圆的颜色。 首先,SVG图像由一系列的图形元素...
然后,在JavaScript中,我们需要获取SVG画布的引用,并创建一个SVG对象,以便通过SVG.js进行操作: ```javascript var draw = SVG('drawingCanvas').size(500, 500); ``` 要实现连线功能,我们需要监听用户的鼠标...
1. 创建SVG元素:首先,你需要使用SVG语法创建基本的2D图形,如`<rect>`、`<circle>`或`<path>`。 2. 将SVG元素转换为3D:使用框架提供的方法,将这些2D图形转换为3D对象。 3. 应用3D变换:通过API调整对象的位置、...
SVG的主要优点在于其可编程性,我们可以使用JavaScript来操纵SVG元素,包括创建、修改、动画化等。在本项目中,SVG被用来创建点路径,其中每个点都可以由用户动态添加或编辑。 JavaScript是网页开发中的主要脚本...
- **文本编辑器**:用于创建SVG文件。虽然任何纯文本编辑器都足够,但使用支持XML的编辑器可以帮助检查文件格式和有效性。 - **SVG查看器**:Adobe的SVG Viewer V3.0是目前使用最为广泛的SVG查看器,可在Adobe官方...
下面将详细讲解这些技术以及如何结合使用来创建动态的进度条倒计时。 首先,HTML5是现代网页开发的基础,提供了许多增强用户体验的新特性。在创建进度条倒计时时,HTML元素如`<div>`或`<svg>`可以作为容器来展示...
【JavaScript与SVG交互】JavaScript可以直接在浏览器上运行,无需额外软件,因此常用于创建复杂的SVG交互应用。通过在SVG文档中设置事件监听器,并编写JavaScript函数来响应和处理这些事件,可以实现图形的动态变化...
本压缩包“精通JavaScript动态网页编程(实例版)”包含了深入理解和实践JavaScript编程所需的各种资源,特别是对于想要提升动态网页设计能力的学习者来说,极具价值。 JavaScript的核心知识点包括以下几个方面: ...
在本节中,我们将深入探讨SVG中JavaScript脚本的使用,包括内部脚本、外部脚本以及SVG DOM的相关属性和方法。 1. 内部脚本与外部脚本: - 内部脚本:通过`<script>`标签内联嵌入SVG文档中,使用CDATA(Character ...
Snap.svg 是一个强大的JavaScript库,专门用于在Web上创建SVG(可缩放矢量图形)动画和交互。这个中文参考手册是为那些希望在PHP环境中使用Snap.svg的开发者准备的,即使你对PHP不感兴趣,也可以通过提供的链接访问...
而今天我们要讨论的是一个基于jQuery的轻量级插件——用于创建SVG饼图状加载器。 SVG(Scalable Vector Graphics)是一种矢量图形格式,它的优点在于无论放大多少倍都能保持清晰,非常适合用作网页中的图形元素。...