使用Vue.js将您的静态SVG图纸转换为交互式小部件和信息图表

您将要创造的

SVG是一种功能强大且灵活的图形格式，非常适合Web媒体。 与栅格图像格式（例如JPG，PNG或GIF）不同，SVG是基于矢量的，并且由“真实”对象组成，您可以选择任意方式进行操作。 因此，即使使用一些基本脚本，也可以对静态图像进行动画处理并使其具有交互性。 这将是本教程的主题。

SVG和Vue：完美匹配

为了演示如何编写SVG脚本，我选择了Vue.js。 我认为，这样做的原因是SVG和Vue完美匹配。 首先，Vue开箱即用地支持SVG。 其次，SVG与HTML一样，都是基于XML的，因此我们可以将Vue的反应性系统应用于SVG，并使其以与HTML模板相同的便捷方式进行交互。

Vue和SVG集成快速入门

在开始下面将要探讨的两个用例之前，让我为您提供有关SVG和Vue集成工作方式的线索。

首先，我们创建一个基本HTML文件并包含Vue框架。 然后，我们将要操作的SVG放入内部。

<div id="app">
  <svg width="400" height="300">
    <rect @click="toggleStroke" x="10" y="10" :width="width" :height="height" :fill="color" stroke="green" :stroke-width="stroke"></rect>
  </svg>
</div>

在这里，我们有一个矩形对象，其属性绑定到Vue实例中的数据对象。 我们还有一个click事件监听器，它将调用toggleStroke()方法。 因此，当我们单击矩形时，笔划将被切换。

这是Vue代码：

new Vue({
  el: '#app',
  data: {
    color: 'orange',
    width: 100,
    height: 100,
    stroke: 0
  },
  methods: {
    toggleStroke(){
      this.stroke == 0 ? this.stroke = 5 : this.stroke = 0
    }
  }
})

如您所见，将Vue和SVG结合起来非常容易。 现在，让我们探索一些更现实，更有用的示例。

示例一：创建一个倒数计时器小部件

在第一个示例中，我们将创建一个倒数计时器小部件。 它将允许用户设置给定时间段的分钟和秒，启动后，计时器将以循环进度显示剩余时间。

为了绘制进度并设置动画效果，我们将使用SVG圆形对象及其stroke-dasharray属性。 您可以在此处阅读有关SVG循环进度技术的信息 。 另外，要添加一些结构和漂亮的样式，我们将使用Bulma中的Card组件 。 因此，请确保已将框架添加到文件中。

我们首先添加一个卡片组件，然后在其中放置一个带有标题的标题。

<div id="app">
  <div class="card">
    <header class="card-header has-background-grey-darker">
      <p class="card-header-title has-text-success">COUNTDOWN TIMER</p>
    </header>
  </div>
</div>

接下来，我们使用卡的图像部分放置SVG。

<div class="card-image">
  <svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 260 250" width="260" height="250">