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

Question

我在运行vue.js svg.js

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

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

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

Answer 1

我有使用非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
});

实例

Answer 2

要使用 3.x 版，您要么只使用 esm 导入：

import { SVG } from '@svgdotjs/svg.js'
import '@svgdotjs/svg.draggable.js'
// ...

无需为 vue 使用插件。 只需在需要时在代码中使用SVG() 。 如果您需要其他功能，例如“旧的” SVG.on() ，您也需要导入它： import { SVG, on } from '@svgdotjs/svg.js'

或者您通过脚本标签包含它。 为此，svg.js 总是附带预先捆绑的文件：

<script src="node_modules/@svgdotjs/svg.js/dist/svg.js"></script>
<script src="node_modules/@svgdotjs/svg.draggable.js/dist/svg.draggable.js"></script>

在这种情况下，您可以只使用全局SVG变量并使用它访问所有内容，例如SVG.on(...)

Answer 3

我不得不根据Fuzzyma的评论改变我的方法

所以我只是在我的应用程序文件中做了简单的导入，一切正常。 还值得一提的是，我使用版本< 3.0来使其工作。

import * as SVG from 'svg.js/dist/svg';
import './plugins/svg.draggable/dist/svg.draggable';
import './plugins/svg.select/dist/svg.select';
import './plugins/svg.resize/dist/svg.resize';