【Angular Utilities】SVG で三角形を描画するツールを作った

Angular Utilities 初の SVG。Draw Triangle SVG を作った。

• https://neos21.github.io/angular-utilities/draw-triangle-svg

元は CodePen で見つけたサンプルだった。

• デモ：SVG Triangle Generator
• コード：frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes

ベースとなる1辺の長さを適当に決めて、SVG エリアの左上から右上にかけて2点を先に引いておく。そこから三角形にするための頂点となる位置を上手い具合に求めて、その3点を polygon で結んで三角形にしている。

Angular で SVG を扱うには少し癖があるので、以下の記事を参考にしたい。

• 参考：AngularでSVG使おうぜ！

svg 要素の width・height 属性や、polygon 要素の points 属性を操作する場合は、[attr.points]="myPoints" のように [attr.] を使ってバインディングする。また、polygon は空要素だが、<polygon /> と終了タグ / を付与しないとエラーになってしまう。<input> などは <input /> と書かなくて良いのだが、SVG はどちらかというと XML 的に解釈されているようだ。