用 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 操作还是蛮简单的,将来可能简单的绘图都直接用代码写了。

如果您觉得文章内容对您有用,不妨支持我创作更多有价值的分享:


已发布

分类

来自

标签:

评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据