整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
端必備知識點—SVG
什么是SVG? 全稱為Scalable Vector Graphics，是一種使用XML技術描述二維圖形的語言，簡單來說 - 矢量圖(不失真)
早在HTML5之前,存在SVG技術
SVG文件擴展名為".svg"
在HTML5出現之前,要在HTML頁面中引入SVG文件
在HTML5出現之后,將SVG內容直接定義在HTML頁面中
SVG的優勢
可以使用文本編輯器創建和修改，SVG可被搜索、索引等，SVG繪制的圖像不失真的
SVG不依賴于分辨率，使用DOM或綁定事件，實現大型渲染區域的應用(地圖類)
Canvas依賴于分辨率，不能使用DOM或綁定事件的，運行時以圖片形式出現".jpg"
SVG的標準也是W3C定制的
1.通過元素的屬性方式
fill - 設置填充樣式
fill-opacity - 設置填充透明度
stroke - 設置描邊樣式
stroke-width - 設置邊框的寬度
2.通過style屬性,使用類似于CSS屬性設置方式
注意 - 不能使用CSS中的樣式進行設置
transform屬性，用于設置轉換效果
方法有：rotate()、scale()、translate()
矩形元素- <rect>元素
<rect x="" y="" width="" height="" rx="" ry="" />
x和y - 繪制矩形的左上角坐標值
width和height - 設置繪制矩形的寬度和高度
rx和xy - 設置圓角矩形
圓形元素 - <circle>元素
<circle cx="" cy="" r="" />
cx和cy - 繪制圓形的圓心坐標值
cx和cy不設置值的話,默認為(0,0)
r - 繪制圓形的半徑
橢圓元素- <ellipse>元素
<ellipse cx="" cy="" rx="" ry="" />
cx和cy - 繪制橢圓的圓心坐標值
rx - 繪制橢圓的水平方向的半徑
ry - 繪制橢圓的垂直方向的半徑
注意：當rx和ry的值相同時,繪制的是圓形
線條元素- <line>元素
<line x1="" y1="" x2="" y2="" />
x1和y1 - 繪制直線的起點坐標值
x2和y2 - 繪制直線的終點坐標值
注意：繪制直線時,默認描邊顏色為白色
折線元素 - <ployline>元素
<polyline points="" />
points - 折線的所有點坐標值,都設置在該屬性中
注意：描邊顏色默認為白色,填充顏色默認為黑色
多邊形元素- <polygon>元素
<polygon points="" />
points - 折線的所有點坐標值,都設置在該屬性中
注意： SVG繪制圖形使用元素
單標簽 - 增加結束符"/"
起始標簽
線性漸變 - 基準線
<defs>
<linearGradient id="grad" x1="基準線的起點坐標值x" y1="基準線的起點坐標值y" x2="基準線的終點坐標值x" y2="基準線的終點坐標值y">
<stop offset="0%~100%" stop-color="顏色" />
</linearGradient>
</defs>
<rect fill="url(#漸變元素的id)">
射線漸變 - 基準圓
<defs>
<radialGradient id="grad" fx="設置起點基準圓的圓心x" fy="設置起點基準圓的圓心y" cx="設置終點基準圓的圓心x" cy="設置終點基準圓的圓心y" r="設置終點基準圓的半徑">
<stop offset="0%~100%" stop-color="顏色" />
</radialGradient>
</defs>
<rect fill="url(#漸變元素的id)">
注意：線性漸變或射線漸變,設置基準線(圓)的坐標值必須是百分值，允許為負值，允許為大于 100% 的值
設置漸變顏色位置必須是百分值
只能是從 0% ~ 100%
濾鏡元素 - 高斯模糊
濾鏡元素 - <filter>元素
高斯模糊 - <feGaussianBlur>元素
繪圖 Drawing Shapes
SVG stands for Scalable Vector Graphics, and is used to draw shapes with HTML-style markup.
It offers several methods for drawing paths, boxes, circles, text, and graphic images.
SVG is not pixel-based, so it can be magnified infinitely with no loss of quality.
SVG代表可伸縮矢量圖形，用于繪制具有HTML風格標記的形狀。
它提供了幾種繪制路徑，框，圓，文本和圖形圖像的方法。
SVG不是基于像素的，所以它可以無限放大，沒有質量損失。
2 插入SVG圖像 Inserting SVG Images
An SVG image can be added to HTML code with just a basic image tag that includes a source attribute pointing to the image:
只需一個基本的圖像標簽
3 繪制
To draw shapes with SVG, you first need to create an SVGelement tag with two attributes: width and height.
要使用SVG繪制形狀，您首先需要創建一個SVG元素標簽，其中包含兩個屬性：width和height。
To create a circle, add a <circle> tag:
- cxpushes the center of the circle further to the right of the screen- cypushes the center of the circle further down from the top of the screen- r defines the radius- filldetermines the color of our circle- strokeadds an outline to the circle
s2flowchart 是一個可視化庫，可將任何JavaScript代碼轉換為漂亮的SVG流程圖。你可以輕松地利用它學習其他代碼、設計你的代碼、重構代碼、解釋代碼。這樣一個強大的神器，真的值得你擁有，看下面截圖就知道了，有沒有很強大。
安裝
yarn add js2flowchart
使用
index.html
index.js
我們直接在文本域中輸入自己的代碼，如下，左邊會直接生成流程圖，這只是一個簡單的示例：
js2flowchart獲取您的JS代碼并返回SVG流程圖，適用于客戶端/服務器，支持ES6。
主要特點：
定義抽象級別以僅渲染導入/導出，類/函數名稱，函數依賴性以逐步學習/解釋代碼。
自定義抽象級別支持創建自己的抽象級別
表示生成器，以生成不同抽象級別的SVG列表
定義流樹修改器以映射眾所周知的API，例如 .map，。forEach， .filter到方案上的循環結構等。
銷毀修飾符，用于在方案上用一個形狀替換代碼塊
自定義流樹修改器支持創建自己的流修改器
流樹忽略過濾器完全省略一些代碼節點，如日志行
聚焦節點或整個代碼邏輯分支突出顯示方案的重要部分
模糊節點或整個代碼邏輯分支以隱藏不太重要的東西
定義的樣式主題支持選擇您喜歡的樣式
自定義主題支持創建自己的主題，更好地適合您的上下文顏色
自定義顏色和樣式支持提供方便的API來更改特定樣式而無需樣板
用例場景：
通過流程圖解釋/記錄您的代碼
通過視覺理解學習其他代碼
為有效JS語法簡單描述的任何進程創建流程圖
以上所有功能可以直接到github上詳細了解，用法太多，這里就不在介紹了！
這么強大的東西，有人肯定說如果在開發的時候實時看到流程圖有助于理解代碼，官網提供了插件（我在最新版中測試失效了，不知道是否是我使用的有問題還是插件本身的問題），如果感興趣的可以到擴展商店搜索code-flowchart。如果測試成功，歡迎到評論區分享。以下是我vscode版本和官網的插件使用截圖。
如果利用好這個插件，可以開發出Chrome插件，以及其他JavaScript編輯器或者IDEA的插件，由于官方github已經幾個月沒更新了，所以還不知道未來會不會支持！
來都來了，走啥走，留個言唄~
IT大咖說 | 關于版權
由“IT大咖說（ID：itdakashuo）”原創的文章，轉載時請注明作者、出處及微信公眾號。投稿、約稿、轉載請加微信：ITDKS10（備注：投稿），茉莉小姐姐會及時與您聯系！
感謝您對IT大咖說的熱心支持！
相關推薦
推薦文章
據說這份高考卷，只有程序員能得滿分！
干貨分享：一次Java內存泄漏排查實戰
這個程序員實在是太帥了
最近活動
融云微課堂
線下活動 | Apache Flink 1.9 版本即將發布，新版本有哪些新特性？
線下活動 | 阿里云實時計算專場沙龍，與你探討大數據實時計算的解決方案
點擊【閱讀原文】更多IT技術圈干貨等你挖掘
閱讀原文
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
