,所以也有一种特殊的DOM操作,大多称之为SVG DOM。当然了,由于目前IE不支持SVG,开发基于IE的SVG页面需要采用不同的方式。这部分的知识大家其实都很熟悉,下面只是
<head>
<style>
#svgCont
ainer {
width: 400px;
h
eight: 400px;
background-color: #a0a0a0;
}
</style>
<script>
function CreateSVG () {
VAR XMlns = "http://www.w3.
org/2000/svg";
var boxWidth = 300;
var boxHeight = 300;
var svgElem = document.createElementNS (xmlns, "svg");
svgElem.
setattributeNS (null, "viewBox", "0 0 " + boxWidth + " " + boxHeight);
svgElem.setAttributeNS (null, "width", boxWidth);
svgElem.setAttributeNS (null, "height", boxHeight);
svgElem.style.dis
play = "block";
var g = document.createElementNS (xmlns, "g");
svgElem.ap
PEndChild (g);
g.setAttributeNS (null, 'transform', 'matrix(1,0,0,-1,0,300)');
// draw linear gra
dient
var defs = document.createElementNS (xmlns, "defs");
var grad = document.createElementNS (xmlns, "line
argradient");
grad.setAttributeNS (null, "id", "gradient");
grad.setAttributeNS (null, "x1", "0%");
grad.setAttributeNS (null, "x2", "0%");
grad.setAttributeNS (null, "y1", "100%");
grad.setAttributeNS (null, "y2", "0%");
var stopTop = document.createElementNS (xmlns, "stop");
stopTop.setAttributeNS (null, "offset", "0%");
stopTop.setAttributeNS (null, "stop-color", "#ff0000");
grad.appendChild (stopTop);
var stopBottom = document.createElementNS (xmlns, "stop");
stopBottom.setAttributeNS (null, "offset", "100%");
stopBottom.setAttributeNS (null, "stop-color", "#0000ff");
grad.appendChild (stopBottom);
defs.appendChild (grad);
g.appendChild (defs);
// draw borders
var coo
rds = "M 0, 0";
coords += " l 0, 300";
coords += " l 300, 0";
coords += " l 0, -300";
coords += " l -300, 0";
var path = document.createElementNS (xmlns, "path");
path.setAttributeNS (null, '
stroke', "#000000");
path.setAttributeNS (null, 'stroke-width', 10);
path.setAttributeNS (null, 'stroke-linejoin', "round");
path.setAttributeNS (null, 'd', coords);
path.setAttributeNS (null, 'fill', "url(#gradient)");
path.setAttributeNS (null, 'opac
ITy', 1.0);
g.appendChild (path);
var svgContainer = document.getElementById ("svgContainer");
svgContainer.appendChild (svgElem);
}
</script>
</head>
<body onload="CreateSVG ()">
<div id="svgContainer"></div>
</body>
父元素、子元素和兄弟节点:element.parentNode/element.
espace,而且没有多个namespace的问题,那么设置相关属性的时候,也可以选择使用不带NS的版本,比如直接使用element.setAttribute设置属性值,但是总的来说,还是强烈推荐使用带NS结尾的版本,因为这个版本总是工作
上面的例子中,我们使用element.setAttributeNS/element.setAttribute来给属性赋值,在SVG DOM中,可以使用面向对象的方式,通过访问点号来给对象的属性赋值,比如下面是两种方式的对比:
element.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 100);
element.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EMS, 10);