溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹如何使用svg，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
SVG是什么？
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用于網絡的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
SVG 是萬維網聯盟的標準
SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體
與其他圖像格式相比，使用 SVG 的優勢在于：
SVG 可被非常多的工具讀取和修改（比如記事本）
SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 可在圖像質量不下降的情況下被放大
SVG 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）
SVG 可以與 Java 技術一起運行
SVG 是開放的標準
SVG 文件是純粹的 XML
代碼結構
<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提供的預定義形狀元素的使用和操作：
<rect>標簽可用來創建矩形，以及矩形的變種
<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 值、顏色名或者十六進制值）
4)CSS 的 stroke-width 屬性定義矩形邊框的寬度
5)CSS 的 stroke 屬性定義矩形邊框的顏色
6)x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到瀏覽器窗口左側的距離是 0px）
7)y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）
8)CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的范圍是：0 - 1）
9)CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度（合法的范圍是：0 - 1)
10)rx 和 ry 屬性可使矩形產生圓角。
<circle> 標簽可用來創建一個圓
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
代碼解釋：
1)cx 和 cy 屬性定義圓點的 x 和 y 坐標。如果省略 cx 和 cy，圓的中心會被設置為 (0, 0)
2)r 屬性定義圓的半徑。
<ellipse> 標簽可用來創建橢圓
<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 坐標
2)cy 屬性定義圓點的 y 坐標
3)rx 屬性定義水平半徑
4)ry 屬性定義垂直半徑
<line> 標簽用來創建線條
<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 軸定義線條的結束
4)y2 屬性在 y 軸定義線條的結束
<polygon> 標簽用來創建含有不少于三個邊的圖形
<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>
代碼解釋：
1)points 屬性定義多邊形每個角的 x 和 y 坐標
<polyline> 標簽用來創建僅包含直線的形狀
<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 坐標
<path> 標簽用來定義路徑
<path d="M250 150 L150 350 L350 350 Z" />
下面的命令可用于路徑數據：
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> 標簽用來定義 SVG 濾鏡。<filter> 標簽使用必需的 id 屬性來定義向圖形應用哪個濾鏡？
<filter> 標簽必須嵌套在 <defs> 標簽內。<defs> 標簽是 definitions 的縮寫，它允許對諸如濾鏡等特殊元素進行定義。
<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> 標簽的 id 屬性可為濾鏡定義一個唯一的名稱（同一濾鏡可被文檔中的多個元素使用）
2)filter:url 屬性用來把元素鏈接到濾鏡。當鏈接濾鏡 id 時，必須使用 # 字符
3)濾鏡效果是通過 <feGaussianBlur> 標簽進行定義的。fe 后綴可用于所有的濾鏡
4)<feGaussianBlur> 標簽的 stdDeviation 屬性可定義模糊的程度
5)in="SourceGraphic" 這個部分定義了由整個圖像創建效果
<linearGradient> 可用來定義 SVG 的線性漸變
<linearGradient> 標簽必須嵌套在 <defs> 的內部。<defs> 標簽是 definitions 的縮寫，它可對諸如漸變之類的特殊元素進行定義。
線性漸變可被定義為水平、垂直或角形的漸變：
1)當 y1 和 y2 相等，而 x1 和 x2 不同時，可創建水平漸變
2)當 x1 和 x2 相等，而 y1 和 y2 不同時，可創建垂直漸變
3)當 x1 和 x2 不同，且 y1 和 y2 不同時，可創建角形漸變
<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> 標簽的 id 屬性可為漸變定義一個唯一的名稱
2)fill:url(#orange_red) 屬性把 ellipse 元素鏈接到此漸變
3)<linearGradient> 標簽的 x1、x2、y1、y2 屬性可定義漸變的開始和結束位置
4)漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個 <stop> 標簽來規定。offset 屬性用來定義漸變的開始和結束位置。
<radialGradient> 用來定義放射性漸變
<radialGradient> 標簽必須嵌套在 <defs> 中。<defs> 標簽是 definitions 的縮寫，它允許對諸如漸變等特殊元素進行定義。
<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> 標簽的 id 屬性可為漸變定義一個唯一的名稱，fill:url(#grey_blue) 屬性把 ellipse 元素鏈接到此漸變，cx、cy 和 r 屬性定義外圈，而 fx 和 fy 定義內圈 漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個 <stop> 標簽來規定。offset 屬性用來定義漸變的開始和結束位置。
在svg中提供了如g元素這樣的將多個元素組織在一起的元素。由g元素編組在一起的可以設置相同的顏色，可以進行坐標變
<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”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
