小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

SVG 入門指南(看完,對SVG結(jié)構(gòu)不在陌生)

 板橋胡同37號 2019-12-28

SVG 簡介

SVG，即可縮放矢量圖形(Scalable Vector Graphics)，是一種 XML 應(yīng)用，可以以一種簡潔、可移植的形式表示圖形信息。目前，人們對 SVG 越來越感興趣。大多數(shù)現(xiàn)代瀏覽器都能顯示 SVG 圖形，并且大多數(shù)矢量繪圖軟件都能導(dǎo)出 SVG 圖形。SVG 主要可以概括為以下幾點：

  • SVG 指可伸縮矢量圖形

  • SVG 用來定義網(wǎng)絡(luò)的基于矢量的圖形

  • SVG 使用 XML 格式定義圖形

  • SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有所損失

  • SVG 是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)

  • SVG 與諸如 DOM 和 XSL 之類的 W3C 標(biāo)準(zhǔn)是一個整體

SVG 的應(yīng)用

  1. 圖表視圖(echart)、地圖視圖(WEB-GIS)

  2. 形象(AI)的全網(wǎng)應(yīng)用

  3. UI 產(chǎn)品的設(shè)計

  4. SVG 動畫

SVG 瀏覽器的兼容情況

SVG 與 Canvas 區(qū)別

圖形系統(tǒng)

計算機中描述圖形信息的兩大系統(tǒng)是柵格圖形和矢量圖形。

柵格圖形

在柵格圖形系統(tǒng)中，圖像被表示為圖片元素或者像素的長方形數(shù)組如下圖片所示。每個像素用其 RGB 顏色值或者顏色表內(nèi)的索引表示。這一系列也稱為 位圖，通過以某種壓縮格式存儲。
由于大多數(shù)現(xiàn)代顯示設(shè)備也是柵格設(shè)備，顯示圖像時僅需要一個閱讀器將位圖解壓并將它傳輸?shù)狡聊簧稀?/span>

矢量圖形

矢量圖是基于數(shù)學(xué)的描述，如下圖的多啦A夢，他的頭是一條怎么樣的貝塞爾曲線，它的參數(shù)是什么及用什么顏色來填充貝塞爾曲線，通過這種方式描述圖片就是矢量圖形。
想象一下在一張繪圖紙上作圖的過程，柵格圖形的工作就像是描述哪個方格應(yīng)該填充什么顏色，而矢量圖形的工作則像是描述要繪制從某個點到另一個點的直線或曲線。

創(chuàng)建 SVG 圖像

SVG 文檔基本結(jié)構(gòu)

如下所示，是一個 SVG 文檔結(jié)構(gòu)：
<svg width='140' height='170' xmlns='http://wwww./2000/svg'>  <title>Cat</title>  <desc>Stick Figure of Cat</desc>  <!-- 在這里繪制圖像 --></svg>
根元素 <svg> 以像素為單位定義了整個圖像的 width 和 height，還通過 xmlns 屬性定義了 SVG 的命名空間。<title> 元素的內(nèi)容可以被閱讀器顯示在標(biāo)題欄上或者是作為鼠標(biāo)指針指向圖像時的提示， <desc> 元素允許咱們?yōu)閳D像定義完整的描述信息。

基本形狀和屬性

基本圖形
<rect>、<circle>、<ellipse>、<line>、<polyline>、<polygon>
基本屬性
fill、stroke、stroke-width、transform

基本形狀 --- 圓形

咱們可以通過 <circle> 元素來繪制貓的臉部。元素屬性的中心點 x 坐標(biāo)和 y 坐標(biāo)以為半徑。點(0,0) 為圖像左上角。水平向右移動時 x 坐標(biāo)增大，垂直向下移動時 y 坐標(biāo)增大。為了避免一些誤會，API 語義就很明確了，點 (cx, cy) 就表示圓心的位置，r 表示圓的半徑。
繪圖的顏色是表現(xiàn)的一部分，表現(xiàn)信息包含在 style 屬性中，這里的輪廓顏色為黑色，填充顏色為 none 以使貓的臉部透明。
<svg width='140' heiight='170' xmlns='http://wwww./2000/svg'>  <title>Cat</title>  <desc>Stick Figure of Cat</desc>  <!-- 在這里繪制圖像 -->  <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle></svg>

指定樣式的屬性

接著在添加兩個圓表示兩個眼睛。上面的 stroke 與 fill 是寫在 style 里面的，但是 SVG 也允許咱們使用單獨的屬性，而不用全部寫在 style 內(nèi)，如下所示：
<svg width='140' heiight='170' xmlns='http://wwww./2000/svg'>  <title>Cat</title>  <desc>Stick Figure of Cat</desc>  <!-- 在這里繪制圖像 -->  <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>  <circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle>  <circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle></svg>

圖形對象分組

接著使用兩個 <line> 元素在貓的右臉上添加胡須，先看下線的示意圖：
這很好理解，就不多說了。這里我們需要把胡須作為一個部件，并包裝在分組元素 <g> (后面會講)里面，然后給下 id ，如下所示：
<svg width='140' heiight='170' xmlns='http://wwww./2000/svg'>  <title>Cat</title>  <desc>Stick Figure of Cat</desc>  <!-- 在這里繪制圖像 -->  <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>  <circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle>  <circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle>  <g id='whiskers'>    <line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line>    <line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line>  </g></svg>

圖形對象分組

接著使用 <use> 復(fù)用胡須分組并將它變換(transfrom) 為左側(cè)胡須，如下圖所示，首先在 scale 變換中對 x 坐標(biāo)乘以 -1，翻轉(zhuǎn)坐標(biāo)系統(tǒng)。這意味原始坐標(biāo)系統(tǒng)中的點(75, 95) 現(xiàn)在位于 (-75, 95)。接著通過 translate 向左平移調(diào)整對應(yīng)的位置。
<svg width='140' heiight='170' xmlns='http://wwww./2000/svg'>  <title>Cat</title>  <desc>Stick Figure of Cat</desc>  <!-- 在這里繪制圖像 -->  <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>  <circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle>  <circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle>  <g id='whiskers'>    <line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line>    <line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line>  </g>  <use xlink:href='#whiskers' transform='scale(-1 1) translate(-140 0)' ></use></svg>

其他基本圖形

如下圖所示，咱們使用 <polyline> 元素構(gòu)建嘴和耳朵，它接受一對 x 和 y 坐標(biāo)為 points 屬性的值。你可以使用空格或者逗號分隔這些數(shù)值。
<svg width='140' heiight='170' xmlns='http://wwww./2000/svg'>  <title>Cat</title>  <desc>Stick Figure of Cat</desc>  <!-- 在這里繪制圖像 -->  <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>  <circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle>  <circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle>  <g id='whiskers'>    <line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line>    <line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line>  </g>  <use xlink:href='#whiskers' transform='scale(-1 1) translate(-140 0)' ></use>  <!-- 耳朵 -->  <polyline points='108 62,90 10, 70 45, 50, 10, 32, 62'    style='stroke:black; fill:none' />  <!-- 嘴 -->  <polyline points='35 110,45 120, 95 120, 105, 110'    style='stroke:black; fill:none'/></svg>

路徑

所有的基本形狀都是通用的 <path> 元素的快捷寫法。接著使用 <path> 元素為貓?zhí)砑颖亲?。如下所示的代碼，翻譯過來就是 '移動到坐標(biāo)(75, 90)。繪制一條到坐標(biāo)(65,90) 的直線。然后以 x 半徑為 5、y 半徑為 10 繪制一個橢圓，最后回到坐標(biāo) (75, 90) 處'
<svg width='140' heiight='170' xmlns='http://wwww./2000/svg'>  <title>Cat</title>  <desc>Stick Figure of Cat</desc>  <!-- 在這里繪制圖像 -->  <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>  <circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle>  <circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle>  <g id='whiskers'>    <line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line>    <line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line>  </g>  <use xlink:href='#whiskers' transform='scale(-1 1) translate(-140 0)' ></use>  <!-- 耳朵 -->  <polyline points='108 62,90 10, 70 45, 50, 10, 32, 62'    style='stroke:black; fill:none' />  <!-- 嘴 -->  <polyline points='35 110,45 120, 95 120, 105, 110'    style='stroke:black; fill:none'/>  <!-- 鼻子 -->  <path d='M 75 90 L 65 90 A 5 10 0 0 0 75 90'    style='stroke:black; fill:#ffcccc'  /></svg>

路徑

由于這只是一個簡單的圖形，用戶可能看不出這是一只貓，所以咱們可以使用元素添加一些文本注釋。在元素中，x 和 y 屬性用于指定文本的位置，如下所示：
<svg width='140' height='170'   xmlns='http://wwww./2000/svg'  xmlns:xlink='http://wwww./1999/xlink'>  <title>Cat</title>  <desc>Stick Figure of Cat</desc>  <!-- 在這里繪制圖像 -->  <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>  <circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle>  <circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle>  <g id='whiskers'>    <line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line>    <line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line>  </g>  <use xlink:href='#whiskers' transform='scale(-1 1) translate(-140 0)' ></use>  <!-- 耳朵 -->  <polyline points='108 62,90 10, 70 45, 50, 10, 32, 62'    style='stroke:black; fill:none' />  <!-- 嘴 -->  <polyline points='35 110,45 120, 95 120, 105, 110'    style='stroke:black; fill:none'/>  <!-- 鼻子 -->  <path d='M 75 90 L 65 90 A 5 10 0 0 0 75 90'    style='stroke:black; fill:#ffcccc'  />  <text x='60' y='165' style='font-family:sans-serif;font-size: 14pt;    stroke:none; fill: black;  '>Cat</text>
如果看不懂代碼，沒關(guān)系，后面幾章節(jié)會深入這些基本及屬性。

在網(wǎng)頁中使用 SVG

SVG 是一種圖件格式，因此可以使用與其他圖像類型相同的方式包含在 HTML 頁面中。具體可以采用兩種方法：將圖像包含在 <img> 元素內(nèi)（當(dāng)圖像是頁面的基本組成部分時，推薦這種方式）；或者將圖像作為另一個元素的 CSS 樣式屬性插入(當(dāng)圖像主要用來裝飾時，推薦這種方式)。

在  元素內(nèi)包含 SVG

在 <img> 元素內(nèi)包含 SVG 圖像非常簡單，只需設(shè)置 src 指向 SVG 文件位置即可。如下:
<img src='cat.svg' alt=''/>

在 CSS 中包含 SVG

可以使用 background-image 屬性來顯示 SVG，如果沒有固有尺寸， SVG 會被縮放為元素高度和寬度的 100%，如下所示：
div.background-cat {  background-image: url('cat.svg');  background-size: 100% 100%;}

使用 object 標(biāo)簽引入 SVG （不推薦）

<object> 元素的 type 屬性表示要嵌入的文件類型。這個屬性應(yīng)該是一個有效的網(wǎng)絡(luò)媒體類型(通常被稱為 MIME 類型)。對于 SVG，使用 type='image/svg+xml'。如下所示：
<object data='cat.svg' type='image/svg+xml'   width='100' height='100'/>

在網(wǎng)頁中直接使用 SVG 標(biāo)簽

直接引用 svg 定即可，如下所示：
<svg width='140' heiight='170' xmlns='http://wwww./2000/svg'>  <title>Cat</title>  <desc>Stick Figure of Cat</desc>  <!-- 在這里繪制圖像 -->  <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle></svg>

SVG 的視窗，視野和全局（世界）

視窗
SVG的屬性width、height來控制視窗的大小，也稱為SVG容器
世界
SVG里面的代碼，就是對SVG世界的定義
視野
世界是無窮大的，視野是觀察世界的一個矩形區(qū)域。如下圖所示
世界不可變，而視野是可以改變的。在SVG中，提供了viewBox和preserveAspectRatio屬性來控制視野。

線段

SVG 可以使用元素畫出一條直線，使用只需要指定線段的起(x1, y1)止(x2, y2)點。
<svg width='140' height='170' xmlns='http://wwww./2000/svg'>  <line x1='0' y1='0' x2='100' y2='100' style='stroke:black'/></svg>

筆畫的特性

線段可以看作畫面上畫出來的筆畫。筆畫的尺寸、顏色和風(fēng)格都會影響線段的表現(xiàn)。這些特性都可以在 style 屬性指定。

stroke-width

stroke-width 是設(shè)置線段的粗細(xì)，如下所示：
<svg width='140' height='170' xmlns='http://wwww./2000/svg'>  <line x1='0' y1='0' x2='100' y2='100' style='stroke-width:10;stroke:black'/></svg>

筆畫的顏色和透明度

可以通過以下幾種方式指定筆畫顏色：

  • 基本顏色關(guān)鍵字：aqua、black、blue、fuchsia、gray、green 等

  • 由 6 位十六進制指定的顏色，形式為 #rrggbb，其中 rr 表示紅色, gg 表示綠色, bb 表示藍(lán)色，它們的范圍都是 00--ff

  • 由 3 位十六進制指定的顏色，形式為 #rgb，其中 r 表示紅色，g 表示綠色, b 表示藍(lán)色，它們的范圍都是 0-f 。

  • 通過 rgb() 形式指定的 rgb 顏色值，每個值的取值范圍都是整數(shù) 0-255 或者百分比 0 - 100%

  • currentColor 關(guān)鍵字，表示當(dāng)前元素應(yīng)用的 CSS 屬性 color 的值。color 是用來給 HTML 的文本設(shè)置顏色的，會被子元素繼承，但對 SVG 沒有直接效果。

線段都是實線，咱們也可以使用 stroke-opacity 來控制線的透明度，取值范圍和 CSS 一樣 0.0-1.0,來幾個例子演示一下：
來幾個例子演示一下：
<svg width='140' height='170' xmlns='http://wwww./2000/svg'>  <!-- 紅色 -->  <line x1='10' y1='10' x2='50' y2='10' style='stroke-width:5;stroke:red'/>  <!-- 談綠色 -->  <line x1='10' y1='20' x2='50' y2='20' style='stroke-width:5;stroke:#9f9f;stroke-opacity: 0.2' />  <!-- 橘色 -->  <line x1='10' y1='40' x2='50' y2='40' style='stroke-width:5;stroke:rgb(255,128,64);stroke-opacity: 0.5' />  <!-- 深紫色 -->  <line x1='10' y1='50' x2='50' y2='50' style='stroke-width:5;stroke:rgb(60%,20%,60%);stroke-opacity: 0.8' /></svg>
如果不指定筆畫顏色的話，將看不到任何線，因為 stroke 屬性的默認(rèn)值是 none

stroke-dasharray 屬性

有時咱們需要點線和虛線，剛需要使用 stroke-dasharray 屬性，它的值由一列數(shù)字構(gòu)成，代表線的長度和空隙的長度，數(shù)字之間用逗號或空格隔開。數(shù)字的個數(shù)應(yīng)該為偶數(shù)，但如果是奇數(shù)，則 SVG 會重復(fù)幾次，讓總數(shù)為偶數(shù)。
<svg width='200' height='200' xmlns='http://wwww./2000/svg'>  <!-- 9個像素的虛線，5個像素的空隙 -->  <line x1='10' y1='10' x2='100' y2='10'    style='stroke-dasharray:9, 5; stroke: black; stroke-width:2'  />  <!-- 5個像素的虛線，3個像素的空隙 ,9個像素的虛線，2個像素的空隙 -->  <line x1='10' y1='30' x2='100' y2='30'    style='stroke-dasharray:9, 5, 9, 2; stroke: black; stroke-width:2' />  <!-- 復(fù)制奇數(shù)個數(shù) -->  <line x1='10' y1='50' x2='100' y2='50'    style='stroke-dasharray:9, 3, 5; stroke: black; stroke-width:2' /></svg>

矩形

矩形是最簡單基本形狀，只需要其左上角 x 和 y 坐標(biāo)以及它的寬度(width)和高度(height)，如果想要指定圓角，可以指定 rx(x方向的圓角半徑)，該最大值是矩形寬度的一半，同理，ry(y 方向的圓角半徑)，該最大值是矩形高度的一半。
如果只指定了 rx 和 ry 中的一個值，則認(rèn)為它們相等，矩形內(nèi)部還可以使用 fill 屬性來填充顏色，默認(rèn)為黑色，用 stroke 來繪制邊框，默認(rèn)透明。來幾個例子看看。
<svg width='300' height='500' xmlns='http://wwww./2000/svg'>  <!-- 內(nèi)部填充為黑色，不繪制邊框 -->  <rect x='10' y='10' width='30' height='50'/>  <!-- 內(nèi)部填充為藍(lán)色，繪制較粗，半透明紅色邊框-->  <rect x='50' y='10' width='30' height='50'    style='fill: #0000ff;stroke: red;stroke-width: 7; stroke-opacity: .5'/>  <!-- rx 和 ry 相等，逐漸增大-->  <rect x='10' y='70' rx='2' ry='2' width='20' height='40'     style='stroke:black; fill:none'/>ry5'  <!-- rx 和 ry 相等，逐漸增大-->  <rect x='50' y='70' rx='5'  width='20' height='40'     style='stroke:black; fill:none' />  <!-- rx 和 ry 不相等 -->  <rect x='10' y='130' rx='10' ry='5' width='20' height='40' style='stroke:black; fill:none' />  <rect x='50' y='130' rx='10' ry='5' width='10' height='40' style='stroke:black; fill:none' /></svg>

圓和橢圓

畫一個圓，需要使用 <circle> 元素，并指定圓心的 x 和 y 坐標(biāo)(cx/cy) 以及半徑(r)。和矩形一樣，不指定 fill 和 stroke 時，圓會使用黑色填充并且沒有輪廓線。
<svg width='300' height='500' xmlns='http://wwww./2000/svg'>  <circle cx='30' cy='30' r='20' style='stroke:black; fill:none'/>  <circle cx='80' cy='30' r='20' style='stroke-width:5;stroke:black; fill:none' />
  <ellipse cx='30' cy='80' rx='10' ry='20'    style='stroke:black; fill:none'  />  <ellipse cx='80' cy='80' rx='20' ry='10'    style='stroke:black; fill:none'  /></svg>
對于橢圓來說，除了指定圓心和坐標(biāo)外，還需要同時指定 x 方向的半徑和 y 方向的半徑，屬性分為是 rx 和 ry。對于圓和橢圓來說，如果省略 cx 或者 cy ，則默認(rèn)為 0，如果半徑為 0，則不會顯示圖形，如果半徑為負(fù)數(shù)，則會報錯。來幾個例子看看：

多邊形

咱們可以使用 <polygon> 元素繪制多邊形，使用 points 屬性指定一系列的 x/y 坐標(biāo)對，并用逗號或者空格分隔坐標(biāo)個數(shù)必須是偶數(shù)。指定坐標(biāo)不需要在最后指定返回起始坐標(biāo)， <polygon> 元素會自動回到起始坐標(biāo)。來幾個例子看看：
<svg width='200' height='200' xmlns='http://wwww./2000/svg'>  <!--平等四邊形-->  <polygon points='15,10 55,10 45,20 5,20'    style='fill:red; stroke: black;'  />  <!--五角星-->  <polygon points='35,37.5 37.9,46.1 46.9,46.1 39.7,51.5    42.3,60.1 35,55 27.7,60.1 30.3,51.5 23.1,46.1 32.1,46.1'    style='fill: #ccffcc; stroke: green;'    />  <!--不規(guī)則圖形-->  <polygon points='60 60, 65,72 80 60, 90,90 72,85 50,95'    style='fill: yellow; fill-opacity:.5; stroke:black'  /></svg>
從上面很容易看出多邊形都很容易填充，因為多邊形的各邊都沒有交叉，很容易區(qū)分出多邊形的內(nèi)部區(qū)域和外部區(qū)域。但是，當(dāng)多邊形彼此交叉的時候，要區(qū)分哪些區(qū)域是圖形內(nèi)部并不容易。如下如融合所示，中間的區(qū)域是算內(nèi)部還是外部呢？
<svg width='200' height='200' xmlns='http://wwww./2000/svg'>  <polygon points='48,16 16,96 96,48 0,48 80,96'    style='fill:none; stroke: black;'  /></svg>
SVG有兩種判斷某個點是否在多邊形中的規(guī)則。分別對應(yīng)fill-true屬性的nonezero（默認(rèn)值）和evenodd。其效果圖分別如下：
<body style='padding: 100px 0 0 200px'>
<svg width='200' height='200' xmlns='http://wwww./2000/svg'>  <polygon points='48,16 16,96 96,48 0,48 80,96'    style='fill-rule: nonzero; fill:yellow; stroke: black;'  />
  <polygon points='148,16 116,96 196,48 100,48 180,96'    style='fill-rule: evenodd; fill:red; stroke: black;' /></svg>

折線

<polyline> 元素與有相同的屬性，不同之處在于圖形并不封閉，直接來個事例看看：
<svg width='200' height='200' xmlns='http://wwww./2000/svg'>  <polyline points='5,20 20,20 25,10 35,30 45,10    55,30 65,10 74,30 80,20 95,20'    style='stroke:black; stroke-width:3; fill:none'  /></svg>

總結(jié)

形狀元素

線段：<line x1=' ' y1=' ' x2=' ' y2=' ' style=' '/>矩形：<rect x=' ' y=' ' width=' ' height=' ' style=' '/>圓角矩形：<rect x=' ' y=' ' rx=' ' ry=' ' style=' '/>圓形：<circle cx=' ' cy=' ' r=' ' style=' '/>橢圓形：<ellipse cx=' ' cy=' ' rx=' ' ry=' ' style=' ' />多邊形：<polygon points=' ' style=' '/>折線：<polyline points=' ' style=' '/> //注意需把fill設(shè)成none
SVG有兩種判斷某個點是否在多邊形中的規(guī)則。分別對應(yīng)fill-true屬性的nonezero（默認(rèn)值）和evenodd。其效果圖分別如下：

筆畫特性：

屬性
值
stoke
筆畫顏色，默認(rèn)為none
stroke-opacity
筆畫透明度，默認(rèn)為1.0（完全不透明），值范圍：0.0~1.0
stroke-dasharray
用一系列數(shù)字指定虛線和間隙的長度，如：stroke-dasharray:5,10,5,20
stroke-linecap
線頭尾的形狀：butt（默認(rèn)）、round、square
stroke-linejoin
圖形的棱角或一系列連線的形狀：miter（尖的，默認(rèn)值）、round（圓的）、bevel（平的）
stroke-miterlimit
相交處顯示寬度與線寬的最大比例，默認(rèn)為4

填充顏色

屬性
值
fill
指定填充顏色，默認(rèn)值為 black
fill-opacity
從 0.0 到 1.0 的數(shù)字， 0.0 表示完全透明, 1.0(默認(rèn)值) 表示完全不透明
fill-rule
屬性值為 nonzero (默認(rèn)值) 或 evenodd。

在 SVG 中使用樣式

在 SVG 的使用樣式中 CSS 很相似，主要有 4 種，分別如下：
  • 內(nèi)聯(lián)樣式
  • 內(nèi)部樣式表
  • 外部樣式表
  • 表現(xiàn)屬性
內(nèi)聯(lián)樣式
用法跟 css 一樣，如下所示：
<line style='fill:yellow;stroke:blue;stroke-width=4' x1='10' y1='10' x2='100' y2='100'/>*
內(nèi)部樣式表
用法也跟 css 的類名一樣，如下所示：
.linestyle{stroke:red;stroke-width:2;}// 那么在使用標(biāo)簽時，指定此樣式即可：<line class='linestyle' x1='10' y1='10' x2='100' y2='100'/>
外部樣式表
跟 CSS 用法一樣，把樣式寫在另外文件中，然后導(dǎo)入使用。
表現(xiàn)屬性
咱們可能通過 style 屬性修改樣式，當(dāng)然 style 里面的屬性值，可以單獨寫，這種也叫表現(xiàn)屬性：
<circle cx='10' cy='10' r='5'  fill='red' stroke='black' stroke-width='2'/>

分組與引用對象

雖然可以將所有的繪圖看成是由一系列幾乎一樣的形狀和線條組成的，但通常咱們還是認(rèn)為大多數(shù)非抽象的藝術(shù)作品是由一系列命名對象組成的，而這些對象由形狀和線條組合而成。
SVG 提供了一些元素，允許咱們對元素進行這樣的分組，從而使文檔更加結(jié)構(gòu)化以及更易理解。

<g> 元素

1）<g>元素會將所有子元素作為一個組合，通常還有一個唯一的id作為名稱; 
2）每個組合還可以擁有自己的<title>和<desc>來供基于文本的xml應(yīng)用程序識別或者為視障用戶提供更好的可訪問性; 
3）閱讀器會讀取<title>和<desc>元素的內(nèi)容。鼠標(biāo)懸停或者輕觸組合內(nèi)的圖形時，會顯示<title>元素內(nèi)容的提示框。
4）<g>元素可以組合元素并可以提供一些注釋，組合還可以比較嵌套;
在起始標(biāo)簽中指定的所有樣式會應(yīng)用于組合內(nèi)的所有子元素，如下面示例所示，咱們可以不用復(fù)制每個元素上的 style='fill:none; stroke:black;'
 <svg width='240' height='240' xmlns='http://wwww./2000/svg'>  <title>歡樂一家人</title>  <desc>一家人在一起就是簡單幸福的了</desc>
  <g id='house' style='fill:none; stroke:black'>    <desc>房子</desc>    <rect x='6' y='50' width='60' height='60'/>    <polyline points='6 50, 36 9, 66 50' />    <polyline points='36 110, 36 80, 50 80， 50 110' />  </g>
  <g id='man' style='fill:none; stroke:green'>    <desc>男人</desc>    <circle cx='85' cy='56' r='10'/>    <line x1='85' y1='66' x2='85' y2='80'/>    <polyline points='76 104, 85 80, 94 104'/>    <polyline points='76 70, 85 76, 94 70'/>  </g>
  <g id='woman' style='fill:none; stroke:red'>    <desc>女人</desc>    <circle cx='110' cy='56' r='10'/>    <polyline points='110 66, 110 80, 100 90, 120 90, 110 80'/>    <line x1='104' y1='104' x2='108' y2='90'/>    <line x1='112' y1='90' x2='116' y2='104'/>    <polyline points='101 70, 110 76, 119 80'/>  </g> </svg>

<use> 元素

1）復(fù)雜的圖形中經(jīng)常會出現(xiàn)重復(fù)元素，svg 使用<use>元素為定義在<g>元素內(nèi)的組合或者任意獨立圖形元素提供了類似復(fù)雜黏貼的能力; 
2）定義了一組<g>圖形對象后，使用<use>標(biāo)簽再次顯示它們。要指定想要的重用的組合就給xlink:href屬性指定URI即可，同時還要指定x和y的位置以表示組合應(yīng)該移動到的位置。 
3）<use>元素并不限制只使用在同一個文件內(nèi)的對象，還可以指定任意有效的文件或者URI.
因此為了創(chuàng)建另一個上面的房子和一組小人，只要把下面的代碼入 <svg> 元素里面即可。
<use xlink:href='#house' x='70' y='100'/><use xlink:href='#woman' x='-80' y='100'/><use xlink:href='#man' x='-30' y='100'/>

<defs>元素

上面例子有幾個缺點：
  • 復(fù)用 man 和 woman 組合時，需要知道原始圖像中這些圖形的位置，并以此位置作為利用的基礎(chǔ)，而不是使用諸如 0 這樣的簡單數(shù)字
  • 房子的填充和筆畫顏色由原始圖形建立，并且不能通過  元素覆蓋，這說明咱們不能構(gòu)造一行彩色的房子。
  • 文檔中會畫出所有的三個元素 woman,man 和 house,并不能將它們單獨 '存儲' 下來，然后只繪制一排房子或者只繪制一組人。
<defs> 元素可以解決這些問題
1）SVG規(guī)范推薦我們將所有想要復(fù)用的對象放置在元素內(nèi)，這樣SVG閱讀器進入流式環(huán)境中就能更輕松地處理數(shù)據(jù)。2）由于組合在<defs>元素內(nèi)，它們不會立刻繪制到屏幕上，而是作為'模板'供其他地方使用。
<svg width='240' height='240' viewBox='0 0 240 240' xmlns='http://wwww./2000/svg'>  <title>歡樂一家人</title>  <desc>一家人在一起就是簡單幸福的了</desc>
  <defs>    <g id='house' style='stroke:black'>      <desc>房子</desc>      <rect x='0' y='41' width='60' height='60' />      <polyline points='0 41, 30 0, 60 41' />      <polyline points='30 110, 30 71, 44 71， 44 101' />    </g>
    <g id='man' style='fill:none; stroke:green'>      <desc>男人</desc>      <circle cx='10' cy='10' r='10' />      <line x1='10' y1='20' x2='10' y2='44' />      <polyline points='1 58, 10 44, 19 58' />      <polyline points='1 24, 10 30, 19 24' />    </g>
    <g id='woman' style='fill:none; stroke:red'>      <desc>女人</desc>      <circle cx='10' cy='10' r='10' />      <polyline points='10 20, 10 34, 0 44, 20 44, 10 34' />      <line x1='4' y1='58' x2='8' y2='44' />      <line x1='12' y1='44' x2='16' y2='58' />      <polyline points='1 24, 10 30, 19 24' />    </g>
    <g id='couple'>      <desc>夫妻</desc>      <use xlink:href='#man' x='0' y='0'/>      <use xlink:href='#woman' x='25' y='0'/>    </g>  </defs>  <use xlink:href='#house' x='0' y='0' style='fill:#cfc'/>  <use xlink:href='#couple' x='70' y='40'/>
  <use xlink:href='#house' x='120' y='0' style='fill:#99f' />  <use xlink:href='#couple' x='190' y='40' /></svg>

<symbol>元素

<symbol>作為模板，同<defs>一樣，內(nèi)部的所有元素都不會展現(xiàn)在畫布上，因此咱們無需把它放在規(guī)范內(nèi)。然而，咱們還是習(xí)慣將它放到 <defs> 中，因為 symbol 也是咱們定義的供后續(xù)使用的元素。
<svg width='240' height='240' viewBox='0 0 240 240' xmlns='http://wwww./2000/svg'>  <defs>    <symbol id='circle' viewBox='0 0 100 100' preserveAspectRatio='xMinYMin meet'>      <circle cx='50' cy='50' r='50'></circle>    </symbol>    <symbol id='triangle' viewBox='0 0 100 100' preserveAspectRatio='xMaxYMax slice'>      <polygon points='0 0, 100 0, 50 100'></polygon>    </symbol>  </defs>  <g stroke='grey' fill='none'>    <rect x='0' y='0' width='50' height='100'></rect>    <rect x='100' y='0' width='50' height='100'></rect>  </g>  <use xlink:href='#circle' width='50' height='100' fill='red'></use>  <use xlink:href='#triangle' width='50' height='100' fill='red' x='100'></use></svg>

image 元素

<image>顧名思義里面放圖片的，至于說是矢量圖(vector)還是位圖(raster)，都成，用起來也方便：
<svg width='310' height='310' viewBox='0 0 310 310' xmlns='http://wwww./2000/svg'>  <ellipse cx='154' cy='154' rx='150' ry='120' style='fill: #999'/>  <ellipse cx='152' cy='152' rx='150' ry='120' style='fill: #999' />
  <image xlink:href='3.jpg' x='72' y='92'    width='160' height='120'  /></svg>
參考：騰訊課堂《走入SVG》慕課網(wǎng)《走進SVG》<SVG 精髓>
本文完~

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多