背景:所实习的公司所有的图表都要用 echarts
画,我画了一段时间后想着画快一点,故有了这篇文章。
此方案是 echarts
的一个补充而不是代替,对于基本图表如折线图、柱状图或较简单的关系图最好使用 echarts
,对于 echarts
实现起来较繁琐的,可用此单纯的 svg
方案。
可能使用到的工具
-
draw.io
编辑器:web 版本:app.diagrams.net/
桌面版本:github.com/jgraph/draw…(一支红杏出墙来),或在群里找
-
正侧表达式工具
regex101
:地址: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
处。著作权归作者所有。 商业转载请联系作者获得授权,非商业转载请注明出处。 原文: www.w3cplus.com/svg/transfo… © 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)的除外。
(完)