SVG入門

時間 2019-11-20

標籤 svg 入門简体版

原文原文鏈接

一．什麼是SVG？
SVG(Scalable Vector Graphics)可伸縮矢量圖形，它是用XML格式來定義用於網絡的基於矢量的圖形，而它的特色就是圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失，同時他和DOM同樣都是W3C的一個標準。
這裏解釋下位圖和矢量圖：
位圖，也就是咱們常常能看到的圖片，他是一個平面上密集排布的店的集合，也就是說它是由一個個點構成的。而若是對他進行放大那麼相對應的點就會進行放大，這樣就會讓圖片顯得十分不清晰粗糙。
矢量圖，也稱爲面向對象的圖像或繪圖圖像，在數學上定義爲一系列由線鏈接的點。矢量文件中的圖形元素稱爲對象。每一個對象都是一個自成一體的實體，它具備顏色、形狀、輪廓、大小和屏幕位置等屬性。它的特色是放大後圖像不會失真，和分辨率無關，適用於圖形設計、文字設計和一些標誌設計、版式設計等。矢量圖格式有CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, VML等等。css

二．簡單的SVG代碼
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd ">html

SVG 代碼解析：
第一行包含了 XML 聲明。請注意 standalone 屬性！該屬性規定此 SVG 文件是不是"獨立的"，或含有對外部文件的引用。standalone="no" 意味着 SVG 文檔會引用一個外部文件 - 在這裏，是 DTD 文件。
第二和第三行引用了這個外部的 SVG DTD。該 DTD 位於 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。該 DTD 位於 W3C，含有全部容許的 SVG 元素。
SVG 代碼以 <svg> 元素開始，包括開啓標籤 <svg> 和關閉標籤 </svg> 。這是根元素。width 和 height 屬性可設置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。
SVG 的 <circle> 用來建立一個圓。cx 和 cy 屬性定義圓中心的 x 和 y 座標。若是忽略這兩個屬性，那麼圓點會被設置爲 (0, 0)。r 屬性定義圓的半徑。
stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓。咱們把圓的輪廓設置爲 2px 寬，黑邊框。fill 屬性設置形狀內的顏色。咱們把填充顏色設置爲紅色。
關閉標籤的做用是關閉 SVG 元素和文檔自己。瀏覽器

SVG的優點
• SVG 可被很是多的工具讀取和修改（記事本也能夠輕鬆打開修改）
• SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
• SVG 是可伸縮的
• SVG 圖像可在任何的分辨率下被高質量地打印
• SVG 可在圖像質量不降低的狀況下被放大
• SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製做地圖）
• SVG 能夠與 Java 等技術一塊兒運行
• SVG 是開放的標準
• SVG 文件是純粹的 XML
SVG 文件可經過如下標籤嵌入 HTML 文檔：<embed>、<object> 或者 <iframe>。
SVG的代碼能夠直接嵌入到HTML頁面中，或您能夠直接連接到SVG文件。網絡

工具：
AdobeIllustratorsvg

三.通常用法
矩形 <rect>
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">工具

<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
動畫

• rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
• style 屬性用來定義 CSS 屬性
• CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進制值）
• CSS 的 stroke-width 屬性定義矩形邊框的寬度
• CSS 的 stroke 屬性定義矩形邊框的顏色
• x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到瀏覽器窗口左側的距離是 0px）
• y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）
• CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的範圍是：0 - 1）
• CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度（合法的範圍是：0 - 1）
• CSS opacity 屬性用於定義了元素的透明值 (範圍: 0 到 1)。
• rx 和 ry 屬性可以使矩形產生圓角。
圓形 <circle>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
url

• cx和cy屬性定義圓點的x和y座標。若是省略cx和cy，圓的中心會被設置爲(0, 0)
• r屬性定義圓的半徑
橢圓 <ellipse>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/>
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/>
</svg>
設計

• CX屬性定義的橢圓中心的x座標
• CY屬性定義的橢圓中心的y座標
• RX屬性定義的水平半徑
• RY屬性定義的垂直半徑
線 <line>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

• x1 屬性在 x 軸定義線條的開始
• y1 屬性在 y 軸定義線條的開始
• x2 屬性在 x 軸定義線條的結束
• y2 屬性在 y 軸定義線條的結束
多邊形 <polygon>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

• points 屬性定義多邊形每一個角的 x 和 y 座標
折線 <polyline>（用於建立任何只有直線的形狀）
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3" />
</svg>

路徑 <path>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>

<path> 元素用於定義一個路徑。
下面的命令可用於路徑數據：
• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath
注意：以上全部命令均容許小寫字母。大寫表示絕對定位，小寫表示相對定位。
文本 <text>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>

SVG 濾鏡
• SVG可用的濾鏡是：
• feBlend - 與圖像相結合的濾鏡
• feColorMatrix - 用於彩色濾光片轉換
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset - 過濾陰影
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight - 用於照明過濾
• fePointLight - 用於照明過濾
• feSpotLight - 用於照明過濾
• 除此以外，您能夠在每一個 SVG 元素上使用多個濾鏡！
<defs> 和 <filter>
全部互聯網的SVG濾鏡定義在<defs>元素中。<defs>元素定義短並含有特殊元素（如濾鏡）定義。
<filter>標籤用來定義SVG濾鏡。<filter>標籤使用必需的id屬性來定義向圖形應用哪一個濾鏡？

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>

• <filter>元素id屬性定義一個濾鏡的惟一名稱
• <feGaussianBlur>元素定義模糊效果
• in="SourceGraphic"這個部分定義了由整個圖像建立效果
• stdDeviation屬性定義模糊量
• <rect>元素的濾鏡屬性用來把元素連接到"f1"濾鏡

SVG <feOffset> 建立陰影效果
• <feOffset>元素是用於建立陰影效果。咱們的想法是採起一個SVG圖形（圖像或元素）並移動它在xy平面上一點兒。
• 第一個例子偏移一個矩形（帶<feOffset>），而後混合偏移圖像頂部（含<feBlend>）：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
</svg>

• <filter>元素id屬性定義一個濾鏡的惟一名稱
• <rect>元素的濾鏡屬性用來把元素連接到"f1"濾鏡

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>

• <feGaussianBlur>元素的stdDeviation屬性定義了模糊量
SVG 漸變
漸變是一種從一種顏色到另外一種顏色的平滑過渡。另外，能夠把多個顏色的過渡應用到同一個元素上。
SVG漸變主要有兩種類型：
• Linear
• Radial
SVG 線性漸變 - <linearGradient>
<linearGradient>元素用於定義線性漸變。
<linearGradient>標籤必須嵌套在<defs>的內部。<defs>標籤是definitions的縮寫，它可對諸如漸變之類的特殊元素進行定義。

線性漸變能夠定義爲水平，垂直或角漸變：
• 當y1和y2相等，而x1和x2不一樣時，可建立水平漸變
• 當x1和x2相等，而y1和y2不一樣時，可建立垂直漸變
• 當x1和x2不一樣，且y1和y2不一樣時，可建立角形漸變

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" 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="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

水平漸變

垂直漸變

角形漸變

• <linearGradient>標籤的id屬性可爲漸變定義一個惟一的名稱
• <linearGradient>標籤的X1，X2，Y1，Y2屬性定義漸變開始和結束位置
• 漸變的顏色範圍可由兩種或多種顏色組成。每種顏色經過一個<stop>標籤來規定。offset屬性用來定義漸變的開始和結束位置。
• 填充屬性把 ellipse 元素連接到此漸變
SVG 放射性漸變 - <radialGradient>
<radialGradient>元素用於定義放射性漸變。
<radialGradient>標籤必須嵌套在<defs>的內部。<defs>標籤是definitions的縮寫，它可對諸如漸變之類的特殊元素進行定義。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

• <radialGradient>標籤的 id 屬性可爲漸變定義一個惟一的名稱
• CX，CY和r屬性定義的最外層圓和Fx和Fy定義的最內層圓
• 漸變顏色範圍能夠由兩個或兩個以上的顏色組成。每種顏色用一個<stop>標籤指定。offset屬性用來定義漸變色開始和結束
• 填充屬性把ellipse元素連接到此漸變

四．SVG運動動畫
1.<set>
set意思設置，此元素沒有動畫效果
能夠在特定時間以後修改某個屬性值（也能夠是CSS屬性值）。

2.<animate>
基礎動畫元素。實現單屬性的動畫過渡效果。
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<text font-family="microsoft yahei" font-size="120" y="160" x="160">
馬
<animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
</text>
</g>
</svg>

3.<animateTransform>
實現transform變換動畫效果的。與css3中transform變換基本同樣。
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<text font-family="microsoft yahei" font-size="80" y="100" x="100">馬</text>
<animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="1" to="1.5" repeatCount="indefinite"/>
</g>
</svg>

4.<animateMotion>
可讓SVG各類圖形沿着特定的path路徑運動。

五．參考網址http://www.w3school.com.cn/svg/svg_reference.asp菜鳥教程的在線實例：http://www.runoob.com/svg/svg-examples.html

1. SVG入門
2. SVG動畫入門
3. SVG入門—如何手寫SVG
4. svg入門學習回顧
5. SVG 線條動畫入門
6. SVG 入門及實踐
7. SVG 2D入門10 - 濾鏡
8. SVG 圖像入門教程
9. SVG Sprite 入門（SVG圖標解決方案）
10. svg入門：使用js去操做svg圖像
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。