資訊專欄INFORMATION COLUMN
摘要：和確定的版本指定的寬高指定命名空間。的曲線就是使用畫的。等等元素元素是用來組合對象的容器。添加到元素的屬性會被其所有的子元素繼承。是基于矢量的，可以很好的處理圖像大小變化。而是基于位圖的，無法進行大小變化。
背景
最近一直在做報表之類的需求，用highcharts比較多。highcharts使用svg進行繪圖，所以學習了一下svg，稍微記錄一下。
概況svg是XML語言的一種形式。SVG可以通過定義必要的線和形狀來創(chuàng)建一個圖形，也可以修改已有的位圖，或者將這兩種方式結合起來創(chuàng)建圖形。圖形和其組成部分可以變形，可以合成，還可以通過濾鏡完全改變外觀。可能不太準確的簡單來說，"就是可以繪圖的html"。
用法 坐標svg的坐標系統(tǒng)與html的一樣，都是以元素的左上角為(0, 0)坐標。
根元素首先聲明一個根元素svg。svg元素上的屬性是必不可少的。
1、version和baseProfile確定svg的版本 2、width、height指定svg的寬高 3、xmlns指定命名空間。繪制圖形
// 在坐標為(10,10)的地方，繪制寬高為30，輪廓寬5(黑色)，用白色填充的矩形g元素// 繪制半徑為80，圓心位置為(150，100), 填充為綠色的圓 // 連接(10,50)和(110,150)兩個點的一條線 // 繪制橢圓。中心為：(75，75)，長半徑為:20，短半徑為:5 // 繪制折線，points為折線上的點。 // 路徑。d代表的是：一個點集數(shù)列以及其它關于如何繪制路徑的信息。highcharts的曲線就是使用path畫的。path很強大，很復雜，需要一定的數(shù)學基礎。這里就不詳細說了。 等等...
元素g是用來組合對象的容器。添加到g元素上的變換會應用到其所有的子元素上。添加到g元素的屬性會被其所有的子元素繼承。此外，g元素也可以用來定義復雜的對象，之后可以通過use元素來引用它們。
use元素use元素在SVG文檔內取得目標節(jié)點，并在別的地方復制它們。use元素就相當于html中的模板。
在svg中使用CSS在svg中是可以使用css控制樣式的，跟html沒什么區(qū)別。但是，并不是所有的屬性都可以用css來設置。比如，width 、height等，就不能使用css來設置，必須寫在svg元素上，如
那么哪些屬性可以通過css來設置呢？
可以使用css來設置：https://www.w3.org/TR/SVG/pro...
不能使用css來設置：https://www.w3.org/TR/SVG/att...
在svg中，也是可以像html一樣使用class的，比如：
svg中使用CSS需要注意的地方.test { font-size:12px; color:#333333; fill:#333333; } 12:48
注意，svg中的css和html的css還是有不一樣的地方。最重要，也是最容易出錯的，就是transform這個屬性。之前就被深深地坑過。
已經有文章說得很詳細了，這里就不一一說明了。文章地址：
https://www.zhangxinxu.com/wo...
https://css-tricks.com/transf...
在svg中使用DOM操作在svg中使用DOM操作和在html中是一樣的。比如：
const rect = document.querySelector("rect"); rect.getAttribute("x"); rect.setAttribute("x", "100"); rect.addEventListener("click", _ => { console.log(1) }); ...
只需要將svg看成html一樣來進行DOM操作，沒有任何問題。
svg 與canvas的比較兩者在作用上都是一樣的，都是在h5頁面上進行圖像的繪制。但是兩者還是有顯著的區(qū)別。
svg是用xml來描述圖形的，而canvas使用js來繪制圖形。這點上，svg更簡單。
svg支持事件處理器，canvas不支持事件處理器。
svg是基于矢量的，可以很好的處理圖像大小變化。而canvas是基于位圖的，無法進行大小變化。
canvas提供的功能更原始，適合像素處理，動態(tài)渲染和大數(shù)據(jù)量繪制。當元素特別多的時候，canvas的性能更好。畢竟10000多個dom元素的svg，瀏覽器肯定吃不消。
等等...
結束語也是最近老接觸svg，所以稍微研究了一下。前端可視化是一個充滿挑戰(zhàn)，也是一個十分有意思的方向，值得深入研究。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95710.html
摘要：對于一個前端，選擇器是日常生活中必須接觸的部分，這篇文章主要探討一下選擇其的分類及一些小技巧。 對于一個前端er，選擇器是日常生活中必須接觸的部分，這篇文章主要探討一下選擇其的分類及一些小技巧。 【分類】1.基礎選擇器2.結構選擇器3.偽類選擇器4.偽元素5.屬性選擇器 【描述】1.基礎選擇器（瀏覽器都兼容） * 通配符 （可以匹配元素中所有的html元素） 如：*{color...
摘要：馬克當可以做什么代碼高亮制作待辦事項高效繪制流程圖序列圖甘特圖表格流程圖序列圖甘特圖表格書寫數(shù)學公式有道云筆記簡明版使用指南標題標題是每篇文章必備而且最常用的格式。 馬克當可以做什么？ ① 代碼高亮 showImg(https://segmentfault.com/img/bVbaZ60?w=1473&h=659); ② 制作待辦事項To-do List showImg(https:/...
閱讀 2096·2021-11-23 09:51
閱讀 2839·2021-11-22 15:35
閱讀 2937·2019-08-30 15:53
閱讀 1037·2019-08-30 14:04
閱讀 3276·2019-08-29 12:39
閱讀 1802·2019-08-28 17:57
閱讀 1086·2019-08-26 13:39
閱讀 551·2019-08-26 13:34
