标签：svg

分类
js

用 SVG 画五角星

先上代码：

See the Pen draw a star by Meathill (@meathill) on CodePen.

话说前两日想起来填坑，需要用五角星做示例。正好前几天买了本 SVG 的书，就想试一下。这篇文章记录其中几个要点。

多边形 <polygon>

在 SVG 中，画多边形要用到 <polygon>，它有一个属性 points 可以用来定义各个点的座标。有了它我们就可以连点成线做出想要的多边形了。

创建 SVG 元素

以前直接使用 document.createElement() 就能创建出想要的元素，然而 SVG 并非普通的文档，所以要小小的变动一下，使用命名空间来创建合适的元素：

var svg = document.getElementById('svg')
  , ns = svg.namespaceURI
  , star = document.createElementNS(ns, 'polygon');

先取到页面中写好的 SVG 节点，然后取得它的命名空间，最后借由它创建需要的元素。

使用 JS 操作元素

SVG 元素都是 SVGElement，对他们进行操作是需要一点技巧的。

比如，向对变形增加顶点就需要

var point = svg.createSVGPoint();
point.x = 10;
point.y = 10;
star.points.appendItem(point);

总结

整体说来 SVG 操作还是蛮简单的，将来可能简单的绘图都直接用代码写了。