Vue.jsでサクサク！SVG内に線を引いてみる - Qiita

はじめに 前回の記事続きです。 SVGとVue.jsを組み合わせて今回は、Pathを使って線を引いてみるという 処理を実装して見たいと思います。 前回の記事と組み合わせることで、 マインドマップのようなWebアプリも作れるかもしれないです。 (その場合はpath要素と図形要素を保持して、線を設定する形になると思います。) 早速コードを見ていきましょう！ Path要素を入れる まず、線を表現するのに必要なPath要素を、 SVGタグ内に記載いたします。 v-model内にリストで表現し、線でつないだ分だけ可変的に生成できるようにします。 線を引いている時（確定前要素）と、線を引いた後（確定後要素）で、 Pathを分けております。 今回オプション要素で、線の太さや、色を全体に可変的に適用する設定もおまけで入れてます。 <template> <div class="container"> <di