使用javascript动态创建SVG对象的问题

最新推荐文章于 2023-03-22 10:35:33 发布

ayue225

最新推荐文章于 2023-03-22 10:35:33 发布

阅读量468

点赞数

分类专栏： JavaScript 文章标签： JavaScript IE 嵌入式浏览器 Opera ViewUI

本文链接：https://blog.csdn.net/ayue225/article/details/83910053

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

如何在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 οnlοad='call()'>
<input type='button' οnclick='{showmsg();}' value='ok' />
</body>
</html>
SVG支持用<path> 标签用来定义图形的路径

ayue225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用javascript动态创建SVG对象的问题

如何在html中操作SVG对象的问题，对于嵌入式的可以通过document.getElementById('svgId'). getSVGDocument();的方法得到SVG Doc对象，但此方法存在两个问题：一是opera不支持getSVGDocument方法，二是对于动态创建的embed对象并不会马上被呈现，从而无法立刻得到SVGDocument对象，下面的方法会出错 va...
复制链接

扫一扫