SVGで円を描く 毎日少しずつコーディングの勉強

この記事は約2分で読めます。

「1日1コード1アウトプット」ということで、SVGで円を描くのお話です。

本当に「SVGで円を描く」だけですが、一度もSVGを編集したことがない方には是非やってみていただきたいです。

SVGで円を描く

<svg></svg>の間に<circle></circle>と挟めば円、<rect></rect>とやれば四角、シンプルで分かりやすいものですね。

See the Pen SVG circle example by ExDesign (@marimari1020) on CodePen.

各々の指定の意味は次のとおりです。

  • cx : 円のX座標
  • cy : 円のY座標
  • r : 円の半径
  • fill : 円の塗り色
  • stroke : 円の線の色
  • stroke-width : 円の線の太さ
  • stroke-dasharray : 円の線の点線、点の間隔を指定

今日書いたコードはほんとこれだけなのですが、

See the Pen SVG circle example2 by ExDesign (@marimari1020) on CodePen.

とか円を複数描くときもあとから修正するのも数字を直せばいいし、画像ファイルより美しいし、楽しいなあと。

余談

昨日は仕事外で嬉しいことがありました。

今日はお仕事面で嬉しいことがありました。

数週間前にWeb関連の案件に応募していて「今回は別の方に、、、」とお断りのお返事頂戴していたのですが、今日「やっぱりやりませんか」とお話いただきました!

お断りメールにかぶせて「何かあればよろしくお願いいたします。」とお返事したのが良かったのかもしれません。

Web関連は実務経験が浅いながら今後どんどんチャレンジしたい分野なので、気張って頑張ります!

今週はついてるな!

 

タイトルとURLをコピーしました