背景：所實習(xí)的公司所有的圖表都要用 `echarts` 畫，我畫了一段時間后想著畫快一點，故有了這篇文章。

此方案是 `echarts` 的一個補充而不是代替，對于基本圖表如折線圖、柱狀圖或較簡單的關(guān)系圖最好使用 ? `echarts`，對于 `echarts` 實現(xiàn)起來較繁瑣的，**可用**此單純的 `svg` 方案。

可能使用到的工具

• draw.io 編輯器：

  web 版本：Flowchart Maker & Online Diagram Software

  桌面版本：Releases · jgraph/drawio-desktop · GitHub（一支紅杏出墻來）,或在群里找

• 正側(cè)表達式工具 regex101：

  地址：regex101: build, test, and debug regex（一支紅杏出墻來），或用其他類似的工具

步驟

將《一步一步》制作一個示例。

打開 Draw.io ，創(chuàng)建一個空白框圖（當(dāng)然，你也可以創(chuàng)建其他的框圖)：

通過點擊或拖拽左側(cè)邊欄的圖案進行適當(dāng)?shù)臄[放，再雙擊圖案加幾個字：

通過線段讓兩個矩形相連：

好了，再進行簡單的擺放就可以了（此處省略億步）：

接下來是保存，請導(dǎo)出為 .svg：

用 VS Code 打開（不要使用記事本打開）：

點擊編輯器右下角的 XML：

輸入語言模式為 HTML （這是因為編輯器默認(rèn)沒有 XML 的格式化程序，而且有些格式化程序會增加內(nèi)容）：

格式化（快捷鍵：shift+alt+F）后在 <svg> 標(biāo)簽下放入 <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[ ... ]]> 字樣外和熟悉的那個標(biāo)簽用法一樣 。

一個元素上的所有點都會繞著自身的坐標(biāo)原點旋轉(zhuǎn)，HTML元素的坐標(biāo)原點在50% 50%處，SVG元素的坐標(biāo)原點則是在SVG畫板的0 0處。著作權(quán)歸作者所有。 商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。 原文: SVG元素上的transform_SVG, Transform 教程_W3cplus ? w3cplus.com

為了快速地加入動畫，有如下正側(cè)表達式可用：

// js 正則表達式，[.+?]為懶惰模式匹配任意字符一次以上 /(<rect x=.+?<g transform="translate\(-0\.5 -0\.5\)">.+?<\/g>)/gms

此正則表達式會匹配到「矩形與其內(nèi)部的文本」，即 <rect> 與其相鄰的 <g> 標(biāo)簽。

替換為（其中 $1 為組1）：

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

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

可使用上面提到的正側(cè)表達式工具替換：

制作好的局部圖：

注意事項

引入方法如下：

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

最好刪除 svg 標(biāo)簽的寬 width 高 height 屬性，因為不刪除的話包含的元素大小會被限制住。

最好不要使用組合，因為可能會改變標(biāo)簽結(jié)構(gòu)（如果你知道發(fā)生了什么，那就用吧）：

注意層級，擁有動效的元素最好在最前以防止無關(guān)元素意外的遮擋：

線段可深入圖案內(nèi)部，最好避免出現(xiàn)如下斷開的情況：

不要使用記事本打開與保存，有另外保存源文件（.drawio）的除外。

（完）

總結(jié)

以上是生活随笔為你收集整理的另类的切图仔画图方案：svg编辑器+css的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。