svg web拓扑结构升级了，适用动态性加上svg部件

版本号1.0请点此

浏览详细地址

https://svg.yaolunmao.top

怎么使用

# 复制新项目
git clone https://GitHub.com/yaolunmao/vue-webtopo-svgeditor.git

# 进到新项目文件目录
cd vue-webtopo-svgeditor

# 安裝依靠
yarn install

# 运行服务项目
yarn serve

实际操作

点一下加载模版  进到浏览页点一下仿真模拟硬件配置 等候几秒钟就可以见到动画特效

• 鼠标左键选定部件 按着可拖动至蒙版

• 鼠标双击蒙版撤销选定部件

• 右边菜单栏调节选定部件款式

• 电脑键盘↑↓←→可挪动选定部件

• ctrl c拷贝当今选定部件

• deleted删除当前选定部件

• 鼠标中键变大变小选定部件

动态性加上部件

可应用随意转化成svg编码的专用工具，我这里应用在线编译器开展仿真模拟

点一下这儿开展svg图像制作，我这里以心型为例子

将svg编码拷贝出来，引号开展转义，删掉没用特性（例如id），你也能够立即应用我下面的编码

<path fill=\"#FF0000\" stroke=\"#000000\" stroke-width=\"5\" style=\"pointer-events:inherit\" d=\"m143.72081869586242,163.35565803158485 c14.617751633754164,-41.93617271978648 71.89058180534832,0 0,53.91793635401125 c-71.89058180534832,-53.91793635401125 -14.617751633754164,-95.85410907379776 0,-53.91793635401125 z\"  fill-opacity=\"1\" stroke-opacity=\"1\"></path>

将扩展字段名开展双重关联 我现阶段只干了色调

<path :fill=\"svg_color\" :stroke=\"svg_color\" stroke-width=\"5\" style=\"pointer-events:inherit\" d=\"m143.72081869586242,163.35565803158485 c14.617751633754164,-41.93617271978648 71.89058180534832,0 0,53.91793635401125 c-71.89058180534832,-53.91793635401125 -14.617751633754164,-95.85410907379776 0,-53.91793635401125 z\"  fill-opacity=\"1\" stroke-opacity=\"1\"></path>

改动新项目文件夹名称pubilc下的仿真模拟插口回到的json，增加一项：

{
  "type": "TestAddSvg",
  "title": "检测增加部件",
  "template": "<path :fill=\"svg_color\" :stroke=\"svg_color\" stroke-width=\"5\" style=\"pointer-events:inherit\" d=\"m143.72081869586242,163.35565803158485 c14.617751633754164,-41.93617271978648 71.89058180534832,0 0,53.91793635401125 c-71.89058180534832,-53.91793635401125 -14.617751633754164,-95.85410907379776 0,-53.91793635401125 z\"  fill-opacity=\"1\" stroke-opacity=\"1\"></path>",
  "props": ["svg_color"],
  "default_color":"#FF0000",
  "priview_img":"https://svg.yaolunmao.top/test.png"
}

运行新项目，就可以见到刚刚加上的部件了

也适用立即引进照片，只不过是变大有失帧，将下边的编码更换上边json文档的template值

<image x=\"-33\" y=\"-33\" width=\"66\" height=\"66\" xlink:href=\"https://svg.yaolunmao.top/test.png\" />

ps：现阶段管理中心等分线的座标在于svg部件的管理中心座标，请填加transform特性调节svg部件管理中心座标

1.0截屏

License

MIT