使用 Vue 绘制 SVG 图形

Question

SVG 是一种矢量图形格式。 SVG 有两个简洁的特性，使它们非常适合 Web 应用程序：

1. 因为 SVG 是基于矢量的，所以您可以将 SVG 缩放到任意大小，而不会降低质量，也不会更改文件大小。 在文件大小相同的情况下，您的 SVG 在 1000×1000 和 100×100 看起来一样好。
2. .svg文件是看起来很像 HTML 的文本文件。 您可以直接在 HTML 中嵌入 SVG，无需 img标签。

阴阳符号的 SVG 版本 Wikimedia commons 。

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="-40 -40 80 80">
  <circle r="39"/>
  <path d="M0,38a38,38 0 0 1 0,-76a19,19 0 0 1 0,38a19,19 0 0 0 0,38" fill="#fff"/>
  <circle cy="19" r="5" fill="#fff"/>
  <circle cy="-19" r="5"/>
</svg>

从 Vue 控制 SVG

因为 svg是一个有效的 HTML 标签，你可以使用 Vue 控制 SVG 图像。 例如，以下脚本具有复选框，可让您摆脱符号的阴（黑色）或阳（白色）侧：

const app = new Vue({
  data: () => ({
    yin: true,
    yang: true
  }),
  template: `
    <div>
      <div>
        <div>
          <input type="checkbox" v-model="yin"> Yin
        </div>
        <div>
          <input type="checkbox" v-model="yang"> Yang
        </div>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="-40 -40 80 80">
        <circle r="39" v-if="yin"/>
        <circle r="39" v-if="yang && !yin" fill="#fff" />
        <path d="M0,38a38,38 0 0 1 0,-76a19,19 0 0 1 0,38a19,19 0 0 0 0,38" fill="#fff" v-if="yang" />
        <circle v-if="yang" cy="19" r="5" fill="#fff"/>
        <circle v-if="yin" cy="-19" r="5"/>
      </svg>
    </div>
  `
}).$mount('#content');

条形图

SVG 的一个巧妙应用是轻量级图形和图表。 对于许多应用程序，从原始 SVG 构建您自己的图表有点过于复杂，但您可能会在某些专门的用例中看到手工构建的 SVG 可视化。

例如，下面是如何使用 Vue 绘制一个基本折线图，表示从 2020 年 8 月 17 日到 2020 年 8 月 21 日苹果股票的收盘价。

const app = new Vue({
  data: () => ({
    points: [
      { date: '2020-08-17', price: 114.61 },
      { date: '2020-08-19', price: 115.56 },
      { date: '2020-08-20', price: 115.71 },
      { date: '2020-08-21', price: 118.28 },
      { date: '2020-08-22', price: 124.37 },
    ]
  }),
  computed: {
    pointsAsPolyline: function() {
      return this.points.map((p, i) => `${i * 20} ${p.price}`).join(' ');
    }
  },
  template: `
  <div>
    <svg viewBox="0 0 500 100">
      <polyline
        fill="none"
        stroke="#0074d9"
        stroke-width="3"
        v-bind:points="pointsAsPolyline"/>
    </svg>
  </div>
  `
});