亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

SVG的粗談

el09xccxy / 3226人閱讀

摘要：和確定的版本指定的寬高指定命名空間。的曲線就是使用畫(huà)的。等等元素元素是用來(lái)組合對(duì)象的容器。添加到元素的屬性會(huì)被其所有的子元素繼承。是基于矢量的，可以很好的處理圖像大小變化。而是基于位圖的，無(wú)法進(jìn)行大小變化。

背景

最近一直在做報(bào)表之類的需求，用highcharts比較多。highcharts使用svg進(jìn)行繪圖，所以學(xué)習(xí)了一下svg，稍微記錄一下。

概況

svg是XML語(yǔ)言的一種形式。SVG可以通過(guò)定義必要的線和形狀來(lái)創(chuàng)建一個(gè)圖形，也可以修改已有的位圖，或者將這兩種方式結(jié)合起來(lái)創(chuàng)建圖形。圖形和其組成部分可以變形，可以合成，還可以通過(guò)濾鏡完全改變外觀?？赡懿惶珳?zhǔn)確的簡(jiǎn)單來(lái)說(shuō)，"就是可以繪圖的html"。

用法 坐標(biāo)

svg的坐標(biāo)系統(tǒng)與html的一樣，都是以元素的左上角為(0, 0)坐標(biāo)。

根元素

首先聲明一個(gè)根元素svg。svg元素上的屬性是必不可少的。




1、version和baseProfile確定svg的版本
2、width、height指定svg的寬高
3、xmlns指定命名空間。
繪制圖形 
// 在坐標(biāo)為(10,10)的地方，繪制寬高為30，輪廓寬5(黑色)，用白色填充的矩形


// 繪制半徑為80，圓心位置為(150，100), 填充為綠色的圓


// 連接(10,50)和(110,150)兩個(gè)點(diǎn)的一條線 


// 繪制橢圓。中心為：(75，75)，長(zhǎng)半徑為:20，短半徑為:5


// 繪制折線，points為折線上的點(diǎn)。


// 路徑。d代表的是：一個(gè)點(diǎn)集數(shù)列以及其它關(guān)于如何繪制路徑的信息。highcharts的曲線就是使用path畫(huà)的。path很強(qiáng)大，很復(fù)雜，需要一定的數(shù)學(xué)基礎(chǔ)。這里就不詳細(xì)說(shuō)了。



等等...
g元素

元素g是用來(lái)組合對(duì)象的容器。添加到g元素上的變換會(huì)應(yīng)用到其所有的子元素上。添加到g元素的屬性會(huì)被其所有的子元素繼承。此外，g元素也可以用來(lái)定義復(fù)雜的對(duì)象，之后可以通過(guò)use元素來(lái)引用它們。
use元素

use元素在SVG文檔內(nèi)取得目標(biāo)節(jié)點(diǎn)，并在別的地方復(fù)制它們。use元素就相當(dāng)于html中的模板。


   
  
    
      
    
  
 
  black
  
  red
  
  blue
在svg中使用CSS

在svg中是可以使用css控制樣式的，跟html沒(méi)什么區(qū)別。但是，并不是所有的屬性都可以用css來(lái)設(shè)置。比如，width 、height等，就不能使用css來(lái)設(shè)置，必須寫(xiě)在svg元素上，如

那么哪些屬性可以通過(guò)css來(lái)設(shè)置呢？

可以使用css來(lái)設(shè)置：https://www.w3.org/TR/SVG/pro...

不能使用css來(lái)設(shè)置：https://www.w3.org/TR/SVG/att...

在svg中，也是可以像html一樣使用class的，比如：


    12:48


.test {
    font-size:12px;
    color:#333333;
    fill:#333333;
}
svg中使用CSS需要注意的地方

注意，svg中的css和html的css還是有不一樣的地方。最重要，也是最容易出錯(cuò)的，就是transform這個(gè)屬性。之前就被深深地坑過(guò)。

已經(jīng)有文章說(shuō)得很詳細(xì)了，這里就不一一說(shuō)明了。文章地址：

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一樣來(lái)進(jìn)行DOM操作，沒(méi)有任何問(wèn)題。

svg 與canvas的比較

兩者在作用上都是一樣的，都是在h5頁(yè)面上進(jìn)行圖像的繪制。但是兩者還是有顯著的區(qū)別。

svg是用xml來(lái)描述圖形的，而canvas使用js來(lái)繪制圖形。這點(diǎn)上，svg更簡(jiǎn)單。

svg支持事件處理器，canvas不支持事件處理器。

svg是基于矢量的，可以很好的處理圖像大小變化。而canvas是基于位圖的，無(wú)法進(jìn)行大小變化。

canvas提供的功能更原始，適合像素處理，動(dòng)態(tài)渲染和大數(shù)據(jù)量繪制。當(dāng)元素特別多的時(shí)候，canvas的性能更好。畢竟10000多個(gè)dom元素的svg，瀏覽器肯定吃不消。

等等...

結(jié)束語(yǔ)

也是最近老接觸svg，所以稍微研究了一下。前端可視化是一個(gè)充滿挑戰(zhàn)，也是一個(gè)十分有意思的方向，值得深入研究。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/95710.html

相關(guān)文章

  • 【前端學(xué)習(xí)】-粗談選擇器

    摘要：對(duì)于一個(gè)前端，選擇器是日常生活中必須接觸的部分，這篇文章主要探討一下選擇其的分類及一些小技巧。 對(duì)于一個(gè)前端er，選擇器是日常生活中必須接觸的部分，這篇文章主要探討一下選擇其的分類及一些小技巧。 【分類】1.基礎(chǔ)選擇器2.結(jié)構(gòu)選擇器3.偽類選擇器4.偽元素5.屬性選擇器 【描述】1.基礎(chǔ)選擇器（瀏覽器都兼容） * 通配符 （可以匹配元素中所有的html元素） 如：*{color...

    Charlie_Jade 評(píng)論0 收藏0

  • 馬克當(dāng)指南

    摘要：馬克當(dāng)可以做什么代碼高亮制作待辦事項(xiàng)高效繪制流程圖序列圖甘特圖表格流程圖序列圖甘特圖表格書(shū)寫(xiě)數(shù)學(xué)公式有道云筆記簡(jiǎn)明版使用指南標(biāo)題標(biāo)題是每篇文章必備而且最常用的格式。 馬克當(dāng)可以做什么？ ① 代碼高亮 showImg(https://segmentfault.com/img/bVbaZ60?w=1473&h=659); ② 制作待辦事項(xiàng)To-do List showImg(https:/...

    Caizhenhao 評(píng)論0 收藏0

  • 馬克當(dāng)指南

    摘要：馬克當(dāng)可以做什么代碼高亮制作待辦事項(xiàng)高效繪制流程圖序列圖甘特圖表格流程圖序列圖甘特圖表格書(shū)寫(xiě)數(shù)學(xué)公式有道云筆記簡(jiǎn)明版使用指南標(biāo)題標(biāo)題是每篇文章必備而且最常用的格式。 馬克當(dāng)可以做什么？ ① 代碼高亮 showImg(https://segmentfault.com/img/bVbaZ60?w=1473&h=659); ② 制作待辦事項(xiàng)To-do List showImg(https:/...

    sihai 評(píng)論0 收藏0

  • 馬克當(dāng)指南

    摘要：馬克當(dāng)可以做什么代碼高亮制作待辦事項(xiàng)高效繪制流程圖序列圖甘特圖表格流程圖序列圖甘特圖表格書(shū)寫(xiě)數(shù)學(xué)公式有道云筆記簡(jiǎn)明版使用指南標(biāo)題標(biāo)題是每篇文章必備而且最常用的格式。 馬克當(dāng)可以做什么？ ① 代碼高亮 showImg(https://segmentfault.com/img/bVbaZ60?w=1473&h=659); ② 制作待辦事項(xiàng)To-do List showImg(https:/...

    zero 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<