如何使用svg

發(fā)布時間：2020-12-08 14:45:23 來源：億速云閱讀：167 作者：小新欄目：web開發(fā)

這篇文章主要介紹如何使用svg，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

SVG是什么？
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
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ōu)勢在于：
SVG 可被非常多的工具讀取和修改（比如記事本）
SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質(zhì)量地打印
SVG 可在圖像質(zhì)量不下降的情況下被放大
SVG 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）
SVG 可以與 Java 技術(shù)一起運行
SVG 是開放的標(biāo)準(zhǔn)

SVG 文件是純粹的 XML

代碼結(jié)構(gòu)

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
 
<p>This is an HTML paragraph</p>
 
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
 
</body>
</html>

SVG提供的預(yù)定義形狀元素的使用和操作：

<rect>標(biāo)簽可用來創(chuàng)建矩形，以及矩形的變種

如何使用svg

<rect x="20" y="20" rx="20" ry="20" width="250" height="250" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>

代碼解釋：
1)rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
2)style 屬性用來定義 CSS 屬性
3)CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進(jìn)制值）
4)CSS 的 stroke-width 屬性定義矩形邊框的寬度
5)CSS 的 stroke 屬性定義矩形邊框的顏色
6)x 屬性定義矩形的左側(cè)位置（例如，x="0" 定義矩形到瀏覽器窗口左側(cè)的距離是 0px）
7)y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）
8)CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的范圍是：0 - 1）
9)CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度（合法的范圍是：0 - 1)
10)rx 和 ry 屬性可使矩形產(chǎn)生圓角。

<circle> 標(biāo)簽可用來創(chuàng)建一個圓

如何使用svg

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

代碼解釋：
1)cx 和 cy 屬性定義圓點的 x 和 y 坐標(biāo)。如果省略 cx 和 cy，圓的中心會被設(shè)置為 (0, 0)
2)r 屬性定義圓的半徑。

<ellipse> 標(biāo)簽可用來創(chuàng)建橢圓

如何使用svg

<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>

代碼解釋：
1)cx 屬性定義圓點的 x 坐標(biāo)
2)cy 屬性定義圓點的 y 坐標(biāo)
3)rx 屬性定義水平半徑
4)ry 屬性定義垂直半徑

<line> 標(biāo)簽用來創(chuàng)建線條

如何使用svg

<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>

代碼解釋：
1)x1 屬性在 x 軸定義線條的開始
2)y1 屬性在 y 軸定義線條的開始
3)x2 屬性在 x 軸定義線條的結(jié)束
4)y2 屬性在 y 軸定義線條的結(jié)束

<polygon> 標(biāo)簽用來創(chuàng)建含有不少于三個邊的圖形

如何使用svg

<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>

代碼解釋：
1)points 屬性定義多邊形每個角的 x 和 y 坐標(biāo)

<polyline> 標(biāo)簽用來創(chuàng)建僅包含直線的形狀

如何使用svg

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"  style="fill:white;stroke:red;stroke-width:2"/>

代碼解釋：
1)points 屬性定義每段線的每個角的 x 和 y 坐標(biāo)

<path> 標(biāo)簽用來定義路徑

如何使用svg

<path d="M250 150 L150 350 L350 350 Z" />

下面的命令可用于路徑數(shù)據(jù)：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

注釋：以上所有命令均允許小寫字母。大寫表示絕對定位，小寫表示相對定位

SVG 濾鏡可用的濾鏡有：

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

Gaussian Blur高斯模糊

<filter> 標(biāo)簽用來定義 SVG 濾鏡。<filter> 標(biāo)簽使用必需的 id 屬性來定義向圖形應(yīng)用哪個濾鏡？
<filter> 標(biāo)簽必須嵌套在 <defs> 標(biāo)簽內(nèi)。<defs> 標(biāo)簽是 definitions 的縮寫，它允許對諸如濾鏡等特殊元素進(jìn)行定義。
如何使用svg

<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/>

代碼解釋：
1)<filter> 標(biāo)簽的 id 屬性可為濾鏡定義一個唯一的名稱（同一濾鏡可被文檔中的多個元素使用）
2)filter:url 屬性用來把元素鏈接到濾鏡。當(dāng)鏈接濾鏡 id 時，必須使用 # 字符
3)濾鏡效果是通過 <feGaussianBlur> 標(biāo)簽進(jìn)行定義的。fe 后綴可用于所有的濾鏡
4)<feGaussianBlur> 標(biāo)簽的 stdDeviation 屬性可定義模糊的程度
5)in="SourceGraphic" 這個部分定義了由整個圖像創(chuàng)建效果

<linearGradient> 可用來定義 SVG 的線性漸變

如何使用svg
<linearGradient> 標(biāo)簽必須嵌套在 <defs> 的內(nèi)部。<defs> 標(biāo)簽是 definitions 的縮寫，它可對諸如漸變之類的特殊元素進(jìn)行定義。
線性漸變可被定義為水平、垂直或角形的漸變：
1)當(dāng) y1 和 y2 相等，而 x1 和 x2 不同時，可創(chuàng)建水平漸變
2)當(dāng) x1 和 x2 相等，而 y1 和 y2 不同時，可創(chuàng)建垂直漸變
3)當(dāng) x1 和 x2 不同，且 y1 和 y2 不同時，可創(chuàng)建角形漸變

<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"  style="fill:url(#orange_red)"/>

代碼解釋：
1)<linearGradient> 標(biāo)簽的 id 屬性可為漸變定義一個唯一的名稱
2)fill:url(#orange_red) 屬性把 ellipse 元素鏈接到此漸變
3)<linearGradient> 標(biāo)簽的 x1、x2、y1、y2 屬性可定義漸變的開始和結(jié)束位置
4)漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個 <stop> 標(biāo)簽來規(guī)定。offset 屬性用來定義漸變的開始和結(jié)束位置。

<radialGradient> 用來定義放射性漸變

如何使用svg
<radialGradient> 標(biāo)簽必須嵌套在 <defs> 中。<defs> 標(biāo)簽是 definitions 的縮寫，它允許對諸如漸變等特殊元素進(jìn)行定義。

<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>

代碼解釋：
1)<radialGradient> 標(biāo)簽的 id 屬性可為漸變定義一個唯一的名稱，fill:url(#grey_blue) 屬性把 ellipse 元素鏈接到此漸變，cx、cy 和 r 屬性定義外圈，而 fx 和 fy 定義內(nèi)圈漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個 <stop> 標(biāo)簽來規(guī)定。offset 屬性用來定義漸變的開始和結(jié)束位置。

在svg中提供了如g元素這樣的將多個元素組織在一起的元素。由g元素編組在一起的可以設(shè)置相同的顏色，可以進(jìn)行坐標(biāo)變

<svg width="100%" height="100%" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

  <g fill="dodgerblue">
    <rect x="10" y="10" width="40" height="40" ry="10" />
    <rect x="80" y="80" width="40" height="40" ry="10" />
    <rect x="150" y="150" width="40" height="40" ry="10" />
  </g>

</svg>

以上是“如何使用svg”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

如何使用svg

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽