當(dāng)前位置：首頁(yè) >

SVG基本形状及样式设置

發(fā)布時(shí)間：2025/5/22 43 豆豆

生活随笔收集整理的這篇文章主要介紹了 SVG基本形状及样式设置小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前面的話

　　圖形分為位圖和矢量圖。位圖是基于顏色的描述，是由像素點(diǎn)組成的圖像；而矢量圖是基于數(shù)學(xué)矢量的描述，是由幾何圖元組成的圖像，與分辨率無(wú)關(guān)。可縮放矢量圖形，即SVG，是W3C XML的分支語(yǔ)言之一，用于標(biāo)記可縮放的矢量圖形。本文將詳細(xì)介紹SVG基本形狀及樣式設(shè)置

概述

　　SVG是XML語(yǔ)言的一種形式，有點(diǎn)類似XHTML，它可以用來(lái)繪制矢量圖形，可以通過(guò)定義必要的線和形狀來(lái)創(chuàng)建一個(gè)圖形，也可以修改已有的位圖，或者將這兩種方式結(jié)合起來(lái)創(chuàng)建圖形

　　[注意]IE8-瀏覽器不兼容

　　SVG提供了一些元素，用于定義圓形、矩形、簡(jiǎn)單或復(fù)雜的曲線，以及其他形狀。一個(gè)簡(jiǎn)單的SVG文檔由<svg>根元素和基本的形狀元素構(gòu)成。另外還有一個(gè)g元素，它用來(lái)把若干個(gè)基本形狀編成一個(gè)組

　　從這些開始，SVG可以成為任何復(fù)雜的組合圖形。SVG支持漸變、旋轉(zhuǎn)、濾鏡效果、JavaScript接口等等功能，但是所有這些額外的語(yǔ)言特性，都需要在一個(gè)定義好的圖形區(qū)域內(nèi)實(shí)現(xiàn)

【入門】

　　下面直接從一個(gè)簡(jiǎn)單的例子開始介紹

　　效果如下所示

　　上面實(shí)例的繪制流程包括以下幾步

　　1、從svg根元素開始

　　2、繪制一個(gè)完全覆蓋圖像區(qū)域的矩形?<rect>，把背景顏色設(shè)為紅色

　　3、一個(gè)半徑80px的綠色圓圈<circle>繪制在紅色矩形的正中央（向右偏移150px，向下偏移100px）

　　4、繪制文字“SVG”。文字被填充為白色，通過(guò)設(shè)置居中的錨點(diǎn)把文字定位到期望的位置

引入

　　SVG包括以下幾種使用方式：

　　1、使用img、frame、object、embed標(biāo)簽引用，或使用CSS背景圖片

　　2、瀏覽器直接打開SVG文件

　　SVG有以下兩種文件類型

　　a、普通SVG文件是包含SVG標(biāo)記的簡(jiǎn)單文本文件。推薦使用“.svg”（全部小寫）作為此類文件的擴(kuò)展名

　　b、由于在某些應(yīng)用（比如地圖應(yīng)用等）中使用時(shí)，SVG文件可能會(huì)很大，SVG標(biāo)準(zhǔn)同樣允許gzip壓縮的SVG文件。推薦使用“.svgz”（全部小寫）作為此類文件擴(kuò)展名?

　　SVG文件的完整結(jié)構(gòu)如下所示

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg>

　　第一行包含了 XML 聲明，包含version和standalone這兩個(gè)屬性

version表示使用1.0版本的XML standalone屬性規(guī)定該文件是否是“獨(dú)立的”。standalone="no" 意味著會(huì)引用一個(gè)外部文件，在這里是DTD文件

　　第二行引用了這個(gè)外部的 SVG DTD。該 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。該 DTD 位于 W3C，含有所有允許的 SVG 元素

　　[注意]因?yàn)榛赟VG的DTD驗(yàn)證導(dǎo)致的問(wèn)題比它能解決的問(wèn)題更多，所以應(yīng)舍棄來(lái)自 (X)HTML的doctype聲明

　　第三行開始是SVG代碼，包括開始標(biāo)簽 <svg> 和關(guān)閉標(biāo)簽 </svg> 。這是根元素

width和height屬性設(shè)置SVG文檔的寬度和高度 version屬性定義所使用的SVG版本 xmlns屬性定義SVG命名空間

　　因此，SVG的基本框架如下

<?xml version="1.0" standalone="no"?> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

　　3、使用SVG標(biāo)簽

　　在HTML文件中使用SVG標(biāo)簽，或者瀏覽器直接打開SVG文件時(shí)，有一些語(yǔ)法特性需要注意

　　a、SVG的元素和屬性必須按標(biāo)準(zhǔn)格式書寫

　　b、SVG里的屬性值必須用引號(hào)引起來(lái)，就算是數(shù)值也必須這樣做

基本形狀

　　下面介紹的幾個(gè)基本的形狀用于大多數(shù)的SVG繪圖。通過(guò)這些形狀的命名可以知道其用途。給它們一些屬性可以確定它們的位置和大小

　　要想插入一個(gè)形狀，可以在文檔中創(chuàng)建一個(gè)元素。不同的元素對(duì)應(yīng)著不同的形狀，并且使用不同的屬性來(lái)定義圖形的大小和位置。有一些形狀因?yàn)榭梢杂善渌男螤顒?chuàng)建而略顯冗余，?但是它們用起來(lái)方便，可讓SVG文檔簡(jiǎn)潔易懂

【矩形】

　　rect元素會(huì)在屏幕上繪制一個(gè)矩形?。其實(shí)只要6個(gè)基本屬性就可以控制它在屏幕上的位置和形狀

x 矩形左上角的x位置 y 矩形左上角的y位置 width 矩形的寬度 height 矩形的高度 rx 圓角的x方位的半徑 ry 圓角的y方位的半徑

　　[注意]如果只設(shè)置rx或ry任意一個(gè)，則另一個(gè)將默認(rèn)相等

　　如果沒有設(shè)置圓角，則默認(rèn)為0

【圓形】

　　circle元素會(huì)在屏幕上繪制一個(gè)圓形。它只有3個(gè)屬性用來(lái)設(shè)置圓形

r 圓的半徑 cx 圓心的x位置 cy 圓心的y位置 <circle cx="25" cy="25" r="20"/>

【橢圓】

?　　橢圓Ellipse是circle元素更通用的形式，可以分別縮放圓的x半徑和y半徑（通常數(shù)學(xué)家稱之為長(zhǎng)軸半徑和短軸半徑）

rx 橢圓的x半徑 ry 橢圓的y半徑 cx 橢圓中心的x位置 cy 橢圓中心的y位置 <ellipse cx="25" cy="25" rx="25" ry="15"/>

【線條】

　　線條Line?繪制直線。它取兩個(gè)點(diǎn)的位置作為屬性，指定這條線的起點(diǎn)和終點(diǎn)位置

　　[注意]line相當(dāng)于只設(shè)置路徑，需要設(shè)置stroke屬性可以顯示出線條

x1 起點(diǎn)的x位置 y1 起點(diǎn)的y位置 x2 終點(diǎn)的x位置 y2 終點(diǎn)的y位置 <line x1="10" y1="5" x2="30" y2="50" stroke="#000" />

【折線】

　　折線Polyline是一組連接在一起的直線。它可以有很多的點(diǎn)，折線的所有點(diǎn)位置都放在一個(gè)points屬性中

　　[注意]如果不將polyline的fill設(shè)置為透明，將會(huì)呈現(xiàn)多邊形的效果

points 點(diǎn)集數(shù)列。每個(gè)數(shù)字用空白、逗號(hào)、終止命令符或者換行符分隔開

　　每個(gè)點(diǎn)必須包含2個(gè)數(shù)字，一個(gè)是x坐標(biāo)，一個(gè)是y坐標(biāo)。所以點(diǎn)列表 (0,0), (1,1) 和(2,2)可以寫成這樣：“0 0, 1 1, 2 2”

【多邊形】

　　多邊形polygon和折線很像，它們都是由連接一組點(diǎn)集的直線構(gòu)成。不同的是，polygon的路徑在最后一個(gè)點(diǎn)處自動(dòng)回到第一個(gè)點(diǎn)。矩形也是一種多邊形，如果需要更多靈活性，也可以用多邊形創(chuàng)建一個(gè)矩形

points 點(diǎn)集數(shù)列。每個(gè)數(shù)字用空白符、逗號(hào)、終止命令或者換行符分隔開。

　　每個(gè)點(diǎn)必須包含2個(gè)數(shù)字，一個(gè)是x坐標(biāo)，一個(gè)是y坐標(biāo)。所以點(diǎn)列表 (0,0), (1,1) 和(2,2)可以寫成這樣：“0 0, 1 1, 2 2”。路徑繪制完后閉合圖形，所以最終的直線將從位置(2,2)連接到位置(0,0)

填充和描邊

　　與canvas類似，svg進(jìn)行樣式設(shè)置的屬性主要是填充fill和描邊stroke

　　多數(shù)基本的涂色可以通過(guò)在元素上設(shè)置兩個(gè)屬性來(lái)搞定：fill屬性和stroke屬性。fill屬性設(shè)置對(duì)象內(nèi)部的顏色，stroke屬性設(shè)置繪制對(duì)象線條的顏色

【透明度】

　　可以使用opacity來(lái)定義圖形的整體透明度。而在SVG中可以分別定義填充色和邊框色的不透明度，屬性fill-opacity控制填充色的不透明度，屬性stroke-opacity控制描邊的不透明度

　　將描邊設(shè)置為0.5的透明度，可實(shí)現(xiàn)雙色描邊的效果

　　除了顏色和透明度設(shè)置，還有其他一些屬性用來(lái)控制繪制描邊的方式

　　stroke-width屬性定義了描邊的寬度。注意，描邊是以路徑為中心線繪制的，在上面的例子里，路徑是粉紅色的，描邊是黑色的。路徑的每一側(cè)都有均勻分布的描邊

　　第二個(gè)影響描邊的屬性是stroke-linecap屬性，它控制邊框終點(diǎn)的形狀，有三種可能值

　　1、butt用直邊結(jié)束線段，它是常規(guī)做法，線段邊界90度垂直于描邊的方向、貫穿它的終點(diǎn)

　　2、square的效果差不多，但是會(huì)稍微超出實(shí)際路徑的范圍，超出的大小由stroke-width控制

　　3、round表示邊框的終點(diǎn)是圓角，圓角的半徑也是由stroke-width控制的

　　還有一個(gè)stroke-linejoin屬性，用來(lái)控制兩條描邊線段之間，用什么方式連接

　　每條折線都是由兩個(gè)線段連接起來(lái)的，連接處的樣式由stroke-linejoin屬性控制，它有三個(gè)可用的值

　　1、miter是默認(rèn)值，表示用方形畫筆在連接處形成尖角

　　2、round表示用圓角連接，實(shí)現(xiàn)平滑效果

　　3、bevel表示連接處會(huì)形成一個(gè)斜接

　　最后，可以通過(guò)指定stroke-dasharray屬性，將虛線類型應(yīng)用在描邊上

　　stroke-dasharray屬性的參數(shù)，是一組用逗號(hào)分割的數(shù)字組成的數(shù)列。這里的數(shù)字必須用逗號(hào)分割（空格會(huì)被忽略）。每一組數(shù)字，第一個(gè)用來(lái)表示填色區(qū)域的長(zhǎng)度，第二個(gè)用來(lái)表示非填色區(qū)域的長(zhǎng)度

　　上面的例子中，第二個(gè)路徑會(huì)先做5個(gè)像素單位的填色，緊接著是5個(gè)空白單位，然后又是5個(gè)單位的填色。如果想要更復(fù)雜的虛線模式，可以定義更多的數(shù)字

　　第一個(gè)例子指定了3個(gè)數(shù)字，這種情況下，數(shù)字會(huì)循環(huán)兩次，形成一個(gè)偶數(shù)的虛線模式（奇數(shù)個(gè)循環(huán)兩次變偶數(shù)個(gè)）。所以該路徑首先渲染5個(gè)填色單位，10個(gè)空白單位，5個(gè)填色單位，然后回頭以這3個(gè)數(shù)字做一次循環(huán)，但是這次是創(chuàng)建5個(gè)空白單位，10個(gè)填色單位，5個(gè)空白單位。通過(guò)這兩次循環(huán)得到偶數(shù)模式，并將這個(gè)偶數(shù)模式不斷重復(fù)

　　另外還有一些關(guān)于填充和描邊的屬性，如下所示

　　1、fill-rule，用于定義如何給圖形重疊的區(qū)域上色

　　2、stroke-miterlimit，定義什么情況下繪制或不繪制邊框連接的miter效果

CSS

　　可以通過(guò)CSS來(lái)樣式化填充和描邊。語(yǔ)法和在html里使用CSS一樣，只不過(guò)要把background-color、border改成fill和stroke

　　不是所有的屬性都能用CSS來(lái)設(shè)置。上色和填充的部分一般是可以用CSS來(lái)設(shè)置的，比如fill，stroke，stroke-dasharray等，但是不包括下面會(huì)提到的漸變和圖案等功能。另外，width、height，以及路徑的命令等等，都不能用css設(shè)置。判斷它們能不能用CSS設(shè)置還是比較容易的

【行間樣式】

　　CSS可以利用style屬性插入到元素的行間

【內(nèi)部樣式】

　　利用<style>設(shè)置一段樣式段落。就像在html里這樣的<style>一般放在<head>里，在svg里可以直接放置<style>標(biāo)簽

　　下面利用CSS來(lái)實(shí)現(xiàn)hover效果

【外部樣式】

　　當(dāng)然，也可以定義一個(gè)外部的樣式表，這種情況只適合SVG文件，不適合在HTML文檔中引入的SVG標(biāo)簽

　　[注意]在HTML文檔的樣式表中，只能設(shè)置SVG的樣式，不能設(shè)置SVG里面的circle等形狀的樣式

<?xml version="1.0" standalone="no"?> <?xml-stylesheet type="text/css" href="style.css"?> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="40"></circle><circle cx="100" cy="100" r="30"></circle><circle cx="100" cy="100" r="20"></circle><circle cx="100" cy="100" r="10"></circle> </svg>

　　style.css看起來(lái)就像這樣

circle{stroke: black; fill: transparent;stroke-width:5;} circle:hover{stroke:red;}

轉(zhuǎn)載于:https://www.cnblogs.com/xiaohuochai/p/7467484.html

總結(jié)

以上是生活随笔為你收集整理的SVG基本形状及样式设置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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

上一篇：个人信息泄露，背后竟有“内鬼”作祟，堵上
下一篇： SOA与云计算相结合推动企业发展