console.log(document.getElementsByTagName("svg"));
I get this
but when
console.log(document.getElementsByTagName("svg")[0]);
I only get undefined
The svg element has been created by javascript but i don know whether it has been loaded ...
I am sorry the code is too long but when I remove the code about image ,it works good. Here:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var svgns = "http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink";
// draw svg frame
var drawSVG = function (width,height)
{
var width = 500,height = 500;
var testsvgpic = document.createElementNS(svgns,"svg:svg");
testsvgpic.setAttributeNS(null,"viewBox","0 0 " + width + " " +height);
testsvgpic.setAttributeNS(null,"id","svgTemplate");
testsvgpic.setAttributeNS(null,"width",width);
testsvgpic.setAttributeNS(null,"height",height);
testsvgpic.style.display = "block";
document.body.appendChild(testsvgpic);
console.log("background done!");
}
//transfor string to array
// define pointsSharp
var pointsSharp = function()
{
var iconTemplate = document.createElementNS(svgns,"defs");
var pathDisconnected = document.createElementNS(svgns,"path");
pathDisconnected.setAttributeNS(null,"id","iconDisconnected");
pathDisconnected.setAttributeNS(null,"d","M 0 0 L 10 10 M 0 10 L 10 0 z");
pathDisconnected.setAttributeNS(null,"stroke","#808080");
pathDisconnected.setAttributeNS(null,"stroke-width",3);
iconTemplate.appendChild(pathDisconnected);
// ......
console.log(document.getElementsByTagName("svg")[0]);
console.log(document.getElementsByTagName("svg"));
document.documentElement.getElementsByTagName("svg").appendChild(iconTemplate);
}
</script>
</head>
<body>
<div id="imgWrap"></div>
<script type="text/javascript">
var imgUrl = 'http://c.s-microsoft.com/zh-cn/CMSImages/20150717_1-1.jpg?version=f4c9d0b8-5817-91b4-c2b8-457c92838ef4';
drawSVG();
//right here
pointsSharp();
</script>
</body>
</html>full code :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var svgns = "http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink";
var imgReady = function (url,callback, error) {
var width, height, intervalId, check, div,
img = new Image(),
body = document.body;
img.src = url;
// 从缓存中读取
if (img.complete) {
return callback(url,img.width, img.height);
};
// 通过占位提前获取图片头部数据
if (body) {
div = document.createElement('div');
div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';
div.appendChild(img)
body.appendChild(div);
width = img.offsetWidth;
height = img.offsetHeight;
check = function () {
if (img.offsetWidth !== width || img.offsetHeight !== height) {
clearInterval(intervalId);
callback(url,img.offsetWidth, img.clientHeight);
img.onload = null;
div.innerHTML = '';
div.parentNode.removeChild(div);
};
};
intervalId = setInterval(check, 150);
};
// 加载完毕后方式获取
img.onload = function () {
callback(url,img.width, img.height);
img.onload = img.onerror = null;
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
};
// 图片加载错误
img.onerror = function () {
error && error();
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
};
};
// draw svg frame
var drawSVG = function (width,height)
{
var width = 500,height = 500;
var testsvgpic = document.createElementNS(svgns,"svg:svg");
testsvgpic.setAttributeNS(null,"viewBox","0 0 " + width + " " +height);
testsvgpic.setAttributeNS(null,"id","svgTemplate");
testsvgpic.setAttributeNS(null,"width",width);
testsvgpic.setAttributeNS(null,"height",height);
testsvgpic.style.display = "block";
var bg = document.createElementNS(svgns,"image");
bg.setAttributeNS(xlinkns,"href",imgUrl);
bg.setAttributeNS(null,"id","bg");
bg.setAttributeNS(null,"x",0);
bg.setAttributeNS(null,"y",0);
bg.setAttributeNS(null,"height",height);
bg.setAttributeNS(null,"width",width);
bg.setAttributeNS(null,"visibility", "visible");
testsvgpic.appendChild(bg);
document.body.appendChild(testsvgpic);
console.log("background done!");
}
//transfor string to array
// define pointsSharp
var pointsSharp = function()
{
var iconTemplate = document.createElementNS(svgns,"defs");
var pathDisconnected = document.createElementNS(svgns,"path");
pathDisconnected.setAttributeNS(null,"id","iconDisconnected");
pathDisconnected.setAttributeNS(null,"d","M 0 0 L 10 10 M 0 10 L 10 0 z");
pathDisconnected.setAttributeNS(null,"stroke","#808080");
pathDisconnected.setAttributeNS(null,"stroke-width",3);
iconTemplate.appendChild(pathDisconnected);
// ......
console.log(document.getElementsByTagName("svg")[0]);
console.log(document.getElementsByTagName("svg"));
//here I want to add to the svg but failed
document.documentElement.getElementsByTagName("svg").appendChild(iconTemplate);
}
</script>
</head>
<body>
<div id="imgWrap"></div>
<script type="text/javascript">
var imgUrl = 'http://c.s-microsoft.com/zh-cn/CMSImages/20150717_1-1.jpg?version=f4c9d0b8-5817-91b4-c2b8-457c92838ef4';
imgReady(imgUrl,drawSVG,function () {alert('Img Error!');});
// get wrong here
pointsSharp();
</script>
</body>
</html>