Corredor

ウェブ、プログラミングの勉強メモ。

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

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

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

See the Pen SVG Triangle Generator by Neos21 (@Neos21) on CodePen.

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

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

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

SVGエッセンシャルズ 第2版

SVGエッセンシャルズ 第2版

  • 作者: J. David Eisenberg,Amelia Bellamy-Royds,原隆文
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2017/05/17
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る

Webで使える!SVGファーストガイド

Webで使える!SVGファーストガイド