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

Question

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

我就是这样使用的svg.js

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

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

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

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

import svgJs from "./plugins/vueSvgPlugin"

Vue.use(svgJs);

第 3 步： 然后我可以这样做。

console.log(this.$svg);

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

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

svg.select.js
svg.resize.js
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
});

Live Example

Answer 2

我不得不根据

的评论改变我的方法

所以我只是在我的应用程序文件中做了简单的导入，一切正常。还值得一提的是，我使用版本 < 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';

Answer 3

要使用版本 3.x，您可以直接使用 esm 导入：

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

无需使用vue插件。需要时只需在代码中使用 SVG() 即可。如果您需要 "old" 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(...)

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

How do i use SVG.js plugins in vue.js?

javascript

svg

laravel

svg.js

vue.js