关于前端:另类的切图仔画图方案svg编辑器css

背景：所实习的公司所有的图表都要用 echarts 画，我画了一段时间后想着画快一点，故有了这篇文章。

此计划是 echarts 的一个补充而不是代替，对于根本图表如折线图、柱状图或较简略的关系图最好应用 echarts，对于 echarts 实现起来较繁琐的，可用此单纯的 svg 计划。

draw.io 编辑器：

web 版本：https://app.diagrams.net/

桌面版本：https://github.com/jgraph/dra…（一支红杏出墙来）
正侧表达式工具 regex101：

地址：https://regex101.com/r/SHZPJp/1（一支红杏出墙来），或用其余相似的工具

将《一步一步》制作一个示例。

关上 Draw.io，创立一个空白框图（当然，你也能够创立其余的框图)：

通过点击或拖拽左侧边栏的图案进行适当的摆放，再双击图案加几个字：

通过线段让两个矩形相连：

好了，再进行简略的摆放就能够了（此处省略亿步）：

接下来是保留，请导出为 .svg：

用 VS Code 关上（不要应用记事本关上）：

点击编辑器右下角的 XML：

输出语言模式为 HTML（这是因为编辑器默认没有 XML 的格式化程序，而且有些格式化程序会减少内容）：

格式化（快捷键：shift+alt+F）后在 <svg> 标签下放入 <style>：

<style xmlns="http://www.w3.org/2000/svg" type="text/css" media="screen">
<![CDATA[
.svg-item{transition: 0.3s;}
.svg-item:hover{transform: translateY(-5px);
}
]]>
</style>

如下所示：

除多出了 <![CDATA[ ...]]> 字样外和相熟的那个标签用法一样。

一个元素上的所有点都会绕着本身的坐标原点旋转，HTML 元素的坐标原点在 50% 50% 处，SVG 元素的坐标原点则是在 SVG 画板的 0 0 处。著作权归作者所有。
商业转载请分割作者取得受权, 非商业转载请注明出处。
原文: https://www.w3cplus.com/svg/t… © w3cplus.com

为了疾速地退出动画，有如下正侧表达式可用：

// js 正则表达式，[.+?]为懈怠模式匹配任意字符一次以上
/(<rect x=.+?<g transform="translate\(-0\.5 -0\.5\)">.+?<\/g>)/gms

此正则表达式会匹配到「矩形与其外部的文本」，即 <rect> 与其相邻的 <g> 标签。

替换为（其中 $1 为组 1）：

<g class="svg-item">$1</g>

意思是再包裹一层 g.svg-item。

可应用下面提到的正侧表达式工具替换：

制作好的部分图：

引入办法如下：
```
<embed src="/static/img/xx.svg">
```
最好删除 svg 标签的宽 width 高 height 属性，因为不删除的话蕴含的元素大小会被限制住。
最好不要应用组合，因为可能会扭转标签构造（如果你晓得产生了什么，那就用吧）：
留神层级，领有动效的元素最好在最前以避免无关元素意外的遮挡：
线段可深刻图案外部，最好避免出现如下断开的状况：
不要应用记事本关上与保留，有另外保留源文件（.drawio）的除外。

（完）

关于前端:另类的切图仔画图方案svg编辑器css

可能应用到的工具

步骤

注意事项