突袭HTML5之SVG 2D入门12

以人为本 · 发表于 2013-1-4 03:04:46

<div id="cnblogs_post_body">    使用脚本可以很方便的完成各种复杂的任务，也是完成动画和交互的一种主流方式。由于SVG是html的元素，所以支持普通的DOM操作，又由于SVG本质上是xml文档，所以也有一种特殊的DOM操作，大多称之为SVG DOM。当然了，由于目前IE不支持SVG，开发基于IE的SVG页面需要采用不同的方式。这部分的知识大家其实都很熟悉，下面只是简单的看一下。

HTML页面中的DOM操作    DOM大家应该很熟悉了，这里先看一个小例子：
<div class="cnblogs_code"><head>
<style>
#svgContainer {
  width: 400px;
  height: 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.display = "block";
  var g = document.createElementNS (xmlns, "g");
  svgElem.appendChild (g);
  g.setAttributeNS (null, 'transform', 'matrix(1,0,0,-1,0,300)');
  // draw linear gradient
  var defs = document.createElementNS (xmlns, "defs");
  var grad = document.createElementNS (xmlns, "linearGradient");
  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 coords = "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, 'opacity', 1.0);
  g.appendChild (path);
  var svgContainer = document.getElementById ("svgContainer");
  svgContainer.appendChild (svgElem);
}
</script>
</head>
<body onload="CreateSVG ()">
<div id="svgContainer"></div>
</body>

		自动登录	找回密码
密码			立即注册