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