时间戳

首页 > 解决方案 > 如何在 vue.js 中使用 SVG.js 插件？

javascript - 如何在 vue.js 中使用 SVG.js 插件？

问题描述

我svg.js在我的 Laravel 项目中使用vue.js。

这就是我使用的方式svg.js

第 1 步：svg.js在我的 vue 应用程序中作为插件安装。

import svgJs from "svg.js/dist/svg"

export default {
    install(Vue) {
        Vue.prototype.$svg = svgJs
    }
}

第二步：导入并使用插件。

import svgJs from "./plugins/vueSvgPlugin"

Vue.use(svgJs);

第3步：然后我可以做到这一点。

console.log(this.$svg);

console.log(this.$svg.get("samplesvg"));

但是我不确定如何添加svg.js插件。我想使用以下三个插件，以防有人想知道。

  1. svg.select.js
  2. svg.resize.js
  3. svg.draggable.js

标签： javascriptlaravelvue.jssvgsvg.js

解决方案

我有使用非npm/module库的解决方案。

首先，我将使用jsdelivr直接从 Github 提供文件。例如https://cdn.jsdelivr.net/npm/svg.js@2.7.1/dist/svg.min.js.

然后我使用script.js加载它们。

script.order([
  "https://cdn.jsdelivr.net/npm/svg.js@2.7.1/dist/svg.min.js",
  "https://cdn.jsdelivr.net/npm/svg.select.js@3.0.1/dist/svg.select.min.js"
], () => {
  // window.SVG is available
});

现场示例

推荐阅读