SVG で遊ぶのに Vue.js を利用する

この記事は Vue.js Advent Calendar 2018 の 1 日目の記事です。

SVG 初心者が SVG で遊んでいる記録です。
Vue を使うことで状態管理が簡単にでき、SVG を書くことに集中できました。

• こちらから実際に触れます https://akifo.github.io/vue-svg-text/
• GitHubリポジトリ（動かなかったらごめんなさい..） https://github.com/akifo/vue-svg-text

背景

アドベントカレンダー初日の枠を確保し、SVG で2018 年 Vue カレンダーを盛り上げるぞ！と思っていたのですが、未完成のため、Vue に関する情報はサクっと軽めに記載させていただきます。

以下、GitHub にあるコードとは異なりますが、元となる考え方を少し記録しておきます。

<polygon> の points を配列から文字列に

<polygon> で正方形を指定するには次のように "0,0 100,0 100,100 0,100" と書きます。

<polygon points="0,0 100,0 100,100 0,100"></polygon>

points を Vue で操作できるようにするため、次のように書き換えます。

<polygon :points="points"></polygon>

この points を JavaScript で文字列として保持させますが、元のデータ（pointsArray）は配列として保持しています。将来的にポイントを増やしたり変更したりできるようにするのが目的で配列にしています。

配列の pointsArray から、文字列の points へ良い感じに変換しています。

  data() {
    return {
      pointsArray: [[0, 0], [100, 0], [100, 100], [0, 100]],
    }
  },
  computed: {
    points() {
      return this.pointsArray.join(' ') // "0,0 100,0 100,100 0,100"
    }
  }

これで、ポイントを増やす時は pointsArray を操作すれば自動的に points も変更され、良い感じになりました。

SVG の <text> の再描画がうまくいかない問題

msg というデータが存在し、次のように SVG でレンダリングしようとしている場合、msg の変更時に再描画されないという問題がありました。

<text>{{ msg }}</text>

この問題を解決するために、watch を利用し msg 変更時に、空の文字列を一度代入しています。

<text>{{ text }}</text>

  watch: {
    msg(val) {
      this.text = ''
      this.$nextTick(() => {
        this.text = val
      })
    }
  }

今後の更新予定

• リファクタし、GitHub Qiita にアップする
• $emit と Vuex の使いわけ
• Vuex: getters を使う時に state にあるデータを書き換えない書き方
• SVG の知見まとめる <linearGradient> <pattern> <mask> <clipPath> etc
• ロゴを作って PNG 画像としてダウンロード可能なところまでコードを書く

ライセンスについて

まだ、どのライセンスにするか決めていませんが、これから素材サービスを利用してテクスチャを追加しようと考えているので、それにあわせたライセンスになると思います。