資料
git地址：
https://github.com/frangoteam/svgedit
視頻搬運：
https://www.bilibili.com/video/BV13a411R7q5
demo示例：
https://svgedit.netlify.app/editor/index.html
簡介
SVGEdit 是一個快速的，基於Web的，JS實現的，SVG畫圖編輯器，可工作於任何現代瀏覽器。SVGEdit基於強大的SVG畫布庫@svgedit/svgcanvas。
當前版本爲V7.
本地安裝步驟：
- 從GitHub下載或克隆
- npm i安裝
- npm run build --workspace @svgedit/svgcanvas，構建svgcanvas依賴
- npm run start ，執行測試
- 瀏覽器訪問http://localhost:8000/src/editor/index.html
- npm run build ，構建項目，然後部署web服務（Nginx）
集成到web應用
使用div集成。
<head>
<!-- You need to include the CSS for SVGEdit somewhere in your application -->
<link href="./svgedit.css" rel="stylesheet" media="all"></link>
</head>
<body>
<!-- svgedit container can be positionned anywhere in the DOM
but it must have a width and a height -->
<div id="container" style="width:100%;height:100vh"></div>
</body>
<script type="module">
/* You need to call the Editor and load it in the <div> */
import Editor from './Editor.js'
/* for available options see the file `docs/tutorials/ConfigOptions.md */
const svgEditor = new Editor(document.getElementById('container'))
/* initialize the Editor */
svgEditor.init()
/* set the configuration */
svgEditor.setConfig({
allowInitialUserOverride: true,
extensions: [],
noDefaultExtensions: false,
userExtensions: []
})
</script>
</html>
二開、擴展
基於React擴展