另类的切图仔画图方案：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。

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

制作好的局部图：

注意事项

1. 引入方法如下：

   <embed src="/static/img/xx.svg">

2. 最好删除 svg 标签的宽 width 高 height 属性，因为不删除的话包含的元素大小会被限制住。

3. 最好不要使用组合，因为可能会改变标签结构（如果你知道发生了什么，那就用吧）：

   

4. 注意层级，拥有动效的元素最好在最前以防止无关元素意外的遮挡：

   

5. 线段可深入图案内部，最好避免出现如下断开的情况：

   

6. 不要使用记事本打开与保存，有另外保存源文件（.drawio）的除外。

（完）