当前位置: 首页 > Web前端 > CSS

切图备选绘图方案:svgeditor+css

时间:2023-03-31 12:39:37 CSS

背景:我实习的公司所有的图表都要用echarts绘制。画了一段时间后,想画得快一些,于是想出了这篇文章。该方案是对echarts的补充而非替代。折线图、直方图或更简单的关系图等基本图表最好使用echarts。对于实现起来比较麻烦的echarts,可以使用这个简单的svg方案。可能用到的工具draw.io编辑器:网页版:https://app.diagrams.net/桌面版:https://github.com/jgraph/dra...(一个红杏出墙)正面表达工具regex101:地址:https://regex101.com/r/SHZPJp/1(一个红杏出墙),或者用其他类似的工具做一个《一步一步》的例子。打开Draw.io,创建一个空白的方块图(当然你也可以创建其他方块图):点击或拖动左侧边栏中的图案到合适的位置,然后双击图案添加几个字:让两个连通的矩形:好了,简单的放一下(这里省略一亿步):接下来就是保存,请导出为.svg:用VSCode打开(不要用记事本):点击右边编辑器侧下角XML:输入语言模式为HTML(这是因为编辑器默认没有XML格式化器,有些格式化器会添加内容):格式化后(快捷键:shift+alt+F)在标签下放上如下:除了多余的词...与熟悉的标签用法相同。元素上的所有点都将围绕其自身的坐标原点旋转。HTML元素的坐标原点在50%50%,SVG元素的坐标原点在SVG绘图板的00。版权属于作者。商业转载请联系作者授权,非商业转载请注明出处。原文:https://www.w3cplus.com/svg/t...?w3cplus.com为了快速添加动画,可以使用以下正则表达式://js正则表达式,[.+?]是lazy模式匹配任意字符不止一次/(.+?<\/g>)/gms这个正则表达式将匹配“矩形及其内部的文本”,即及其相邻的标签。Replacewith(where$1isgroup1):$1表示包裹另一层g.svg-item。可以用上面提到的正侧边表达工具来代替:制作局部图:注意导入方法如下:最好去掉宽高svg标签的属性,因为如果不删除它包含的元素的大小会受到限制。最好不要使用组合,因为它可能会改变标签结构(如果你知道是怎么回事,就使用它):注意层次,有动画的元素最好在最上面,防止意外遮挡不相关的元素:线段可以深入到图案内部,最好避免以下断线:除了保存源文件(.drawio)外,不要使用记事本打开和保存。(超过)