HTML5學習--SVG全攻略（基礎篇）

来源:http://www.cnblogs.com/jiaoyu121/archive/2017/07/28/7252688.html
-Advertisement-
Play Games

明天高級篇 一.什麼是SVG？ SVG 指的是可伸縮矢量圖形 (Scalable Vector Graphics),它用來定義用於網路的基於矢量的圖形，使用 XML 格式定義圖形。SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失。此外SVG 是萬維網聯盟的標準，SVG 與諸如 DOM 和 ...


明天高級篇

一.什麼是SVG？

SVG 指的是可伸縮矢量圖形 (Scalable Vector Graphics),它用來定義用於網路的基於矢量的圖形，使用 XML 格式定義圖形。SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失。此外SVG 是萬維網聯盟的標準，SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體。 2003 年一月，SVG 1.1 被確立為 W3C 標準。與其他圖像格式相比，使用 SVG 的優勢有以下幾點：

1.SVG 可被非常多的工具讀取和修改（比如記事本）

2.SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。

3.SVG 是可伸縮的

4.SVG 圖像可在任何的解析度下被高質量地列印

5.SVG 可在圖像質量不下降的情況下被放大

6.SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製作地圖）

7.SVG 可以與 Java 技術一起運行

8.SVG 是開放的標準

9.SVG 文件是純粹的 XML

SVG 的主要競爭者是 Flash,與 Flash 相比，SVG 最大的優勢是與其他標準（比如 XSL 和 DOM）相相容。而 Flash 則是未開源的私有技術。

 

學習過程中遇到什麼問題或者想獲取學習資源的話，歡迎加入學習交流群
343599877，我們一起學前端！

二.SVG 實例

下麵的例子是一個簡單的 SVG 文件的例子。SVG 文件必須使用 .svg 尾碼來保存：

<?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="200" cy="100" r="50" stroke="red" stroke-width="2" fill="green"/>
</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 元素。

1.SVG 代碼以 < svg > 元素開始，包括開啟標簽 < svg > 和關閉標簽 < /svg > ，這是根元素。
2.width 和 height 屬性可設置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。
3.SVG 的 < circle > 用來創建一個圓，cx 和 cy 屬性定義圓中心的 x 和 y 坐標。如果忽略這兩個屬性，那麼圓點會被設置為 (0, 0)。r 屬性定義圓的半徑。
4.stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓。我們把圓的輪廓設置為 2px 寬，紅色邊框。
5.fill 屬性設置形狀內的顏色。我們把填充顏色設置為原諒色。
關閉標簽的作用是關閉 SVG 元素和文檔本身。
註意：所有的開啟標簽必須有關閉標簽！

HTML 頁面中的 SVG
SVG 文件可通過以下標簽嵌入 HTML 文檔：< embed > 、< object > 或者 < iframe >。

三種把 SVG 文件嵌入 HTML 頁面的不同方法。

使用 < embed > 標簽

< embed > 標簽被所有主流的瀏覽器支持，並允許使用腳本。

註釋：當在 HTML 頁面中嵌入 SVG 時使用 < embed > 標簽是 Adobe SVG Viewer 推薦的方法！然而，如果需要創建合法的 XHTML，就不能使用 < embed >。任何 HTML 規範中都沒有 < embed > 標簽。
語法：

< src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/">

註釋：pluginspage 屬性指向下載插件的 URL。

使用 < object > 標簽

< object > 標簽是 HTML 4 的標準標簽，被所有較新的瀏覽器支持。它的缺點是不允許使用腳本。

註釋：假如您安裝了最新版本的 Adobe SVG Viewer，那麼當使用 < object > 標簽時 SVG 文件無法工作（至少不能在 IE 中工作）！

語法：

<object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />

註釋：codebase 屬性指向下載插件的 URL。

使用 < iframe > 標簽

< iframe > 標簽可工作在大部分的瀏覽器中。

語法：

<iframe src="rect.svg" width="300" height="100"></iframe>

三.SVG 各形狀介紹

（一）SVG 矩形
能根據之前的圓形聯想到，rect元素會在屏幕上繪製一個矩形 。其實只要6個基本屬性就可以控制它在屏幕上的位置和形狀。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="20" rx="10" ry="10" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9"/>
</svg>

運行結果.png

代碼解釋：

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 屬性可使矩形產生圓角。

（二）SVG 圓形：詳細見上svg實例

（三）SVG橢圓：
ellipse 標簽可用來創建橢圓。橢圓與圓很相似。不同之處在於橢圓有不同的 x 和 y 半徑，而圓的 x 和 y 半徑是相同的。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="275" cy="125" rx="100" ry="50" style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/>
</svg>

運行結果.png

代碼解釋：

cx 屬性定義圓點的 x 坐標
cy 屬性定義圓點的 y 坐標
rx 屬性定義水平半徑
ry 屬性定義垂直半徑

（四）SVG線條
line 標簽用來創建線條

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>

運行結果.png

代碼解釋：

x1 屬性在 x 軸定義線條的開始
y1 屬性在 y 軸定義線條的開始
x2 屬性在 x 軸定義線條的結束
y2 屬性在 y 軸定義線條的結束

（五）SVG多邊形
polygon 標簽用來創建含有不少於三個邊的圖形。它們都是由連接一組點集的直線構成。polygon的路徑在最後一個點處自動回到第一個點。需要註意的是，矩形也是一種多邊形，如果需要更多靈活性的話，你也可以用多邊形創建一個矩形。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
</svg>

運行結果.png


代碼解釋：

points 屬性定義多邊形每個角的 x 和 y 坐標
點集數列。每個數字用空白符、逗號、終止命令或者換行符分隔開。每個點必須包含2個數字，一個是x坐標，一個是y坐標。所以點列表 (0,0), (1,1) 和(2,2)可以寫成這樣：“0 0, 1 1, 2 2”。路徑繪製完後閉合圖形，所以最終的直線將從位置(2,2)連接到位置(0,0)。

（六）SVG 折線
polyline 標簽用來創建僅包含直線的形狀。它是一組連接在一起的直線。因為它可以有很多的點，折線的的所有點位置都放在一個points屬性中：

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polyline points="20,100 40,60 70,80 100,20" style="fill:white;stroke:red;stroke-width:2"></polyline>
</svg>

運行結果.png

points
點集數列。每個數字用空白符、逗號、終止命令或者換行符分隔開。每個點必須包含2個數字，一個是x坐標，一個是y坐標。所以點列表 (0,0), (1,1) 和(2,2)可以寫成這樣：“0 0, 1 1, 2 2”。路徑繪製完後閉合圖形，所以最終的直線將從位置(2,2)連接到位置(0,0)。

四.SVG 濾鏡簡介

　所有互聯網的SVG濾鏡定義在 < defs > 元素中， < filter > 標簽用來定義SVG濾鏡， < filter > 標簽使用必須的ID屬性來定義向圖形應用到那個濾鏡中。在 SVG 中，可用的濾鏡有：

feBlend SVG 濾鏡。使用不同的混合模式把兩個對象合成在一起。
feColorMatrix SVG 濾鏡。應用matrix轉換。
feComponentTransfer SVG 濾鏡。執行數據的 component-wise 重映射。
feComposite SVG 濾鏡。
feConvolveMatrix SVG 濾鏡。
feDiffuseLighting SVG 濾鏡。
feDisplacementMap SVG 濾鏡。
feDistantLight SVG 濾鏡。 Defines a light source
feFlood SVG 濾鏡。
feGaussianBlur SVG 濾鏡。對圖像執行高斯模糊。
feImage SVG 濾鏡。
feMerge SVG 濾鏡。創建累積而上的圖像。
feMorphology SVG 濾鏡。 對源圖形執行"fattening" 或者 "thinning"。
feOffset SVG 濾鏡。相對與圖形的當前位置來移動圖像。
fePointLight SVG 濾鏡。
feSpecularLighting SVG 濾鏡。
feSpotLight SVG 濾鏡。
feTile SVG 濾鏡。
feTurbulence SVG 濾鏡。

註釋：您可以在每個 SVG 元素上使用多個濾。

（一）SVG 高斯濾鏡
< filter > 標簽必須嵌套在 < defs > 標簽內。< defs > 標簽是 definitions 的縮寫，它允許對諸如濾鏡等特殊元素進行定義。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/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)"/>
</svg>

運行結果.png

代碼解釋：

< filter > 標簽的 id 屬性可為濾鏡定義一個唯一的名稱（同一濾鏡可被文檔中的多個元素使用）
filter:url 屬性用來把元素鏈接到濾鏡。當鏈接濾鏡 id 時，必須使用 # 字元
濾鏡效果是通過 < feGaussianBlur > 標簽進行定義的。fe 尾碼可用於所有的濾鏡
< feGaussianBlur > 標簽的 stdDeviation 屬性可定義模糊的程度
in="SourceGraphic" 這個部分定義了由整個圖像創建效果。

（二）SVG 陰影效果
feOffset 元素用於創建陰影效果
偏移一個矩形（帶 < feOffset > ），然後混合偏移圖像頂部(含 < feBlend > )
SVG代碼：

<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>

運行結果.png

代碼解釋：
< filter > 標簽的 id 屬性可為濾鏡定義一個唯一的名稱（同一濾鏡可被文檔中的多個元素使用）
filter:url 屬性用來把元素鏈接到濾鏡。當鏈接濾鏡 id 時，必須使用 # 字元

（三）SVG 線性漸變
　漸變是一種從一種顏色到另一種顏色的平滑過渡。另外，可以把多個顏色的過渡應用到同一個元素上。

在 SVG 中，有兩種主要的漸變類型：

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

< linearGradient > 標簽必須嵌套在 < defs > 的內部。< defs > 標簽是 definitions 的縮寫，它可對諸如漸變之類的特殊元素進行定義。

線性漸變可被定義為水平、垂直或角形的漸變：

當 y1 和 y2 相等，而 x1 和 x2 不同時，可創建水平漸變
當 x1 和 x2 相等，而 y1 和 y2 不同時，可創建垂直漸變
當 x1 和 x2 不同，且 y1 和 y2 不同時，可創建角形漸變

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <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)"/>
</svg>

運行結果.png

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

（四）SVG 放射漸變
< radialGradient > 用來定義放射性漸變。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <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)"/>
</svg>

運行結果.png

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

 

學習過程中遇到什麼問題或者想獲取學習資源的話，歡迎加入學習交流群
343599877，我們一起學前端！





您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 使用css的類名交集複合選擇器 《轉》
    複合選擇器就是兩個或多個基本選擇器，通過不同方式連接而成的選擇器，主要包括“交集”選擇器、“並集”選擇器、“後代”選擇器。 交集選擇器 “交集”複合選擇器是由兩個選擇器直接連接構成，其結果是選中二者各自元素範圍的交集。其中第一個必須是標記選擇器，第二個必須是類別選擇器或者ID選擇器。這兩個選擇器之間 ...
  • ES6中的迭代器(Iterator)和生成器(Generator)
    [1]引入 [2]迭代器 [3]生成器 [4]可迭代對象 [5]內建迭代器 [6]高級迭代器 [7]非同步任務執行 ...
  • 小程式對接七牛雲存儲
    前言： 做小程式有一段時間了，總結一下做過的技術點，特此貢獻給小伙伴們！項目中，有圖片存儲、視頻存儲、錄音存儲這三個需要雲對接存儲。 一、圖片/視頻/錄音上傳七牛對接 準備工作： a、你要有一個七牛賬號，實名認證後，在七牛的個人中心，有個秘鑰管理-裡面有一對秘鑰，是上傳必須的。這對秘鑰，配置在後端， ...
  • Javascript之數組
    一、概念 數組是值的有序集合。每個值叫做一個元素，兒每個元素值數組中有一個位置，以數字表示，稱為索引。數組的元素可以是任意類型，並且同一個數組中的不同元素也可能有不同的類型。 二、創建數組 1、常規方式： 2、簡介方式 3、字面方式 三、數組的讀寫 四、數組的長度 五、數組元素的添加和刪除 最簡單的 ...
  • js與IE瀏覽器的ActiveXObject對象以及FileSystemobject的應用擴展
    ActiveXObject 對象 啟用和返回對自動化對象的引用。此對象僅用於實例化自動化對象，且此對象沒有成員。 警告：此對象為 Microsoft 擴展，僅在 Internet Explorer 中受支持，在 Windows 8.x 應用商店應用中不受支持。 語法： 參數：newObj：必選。Ac ...
  • >>我要做特工系列 之 CSS 3_animation_向右滑出後下滑並停止
    新手入門還沒有正式發點啥東西，都是在裝潢博客這個家了，到現在為止還是沒有裝修好。。熟悉了這邊的發佈規範之後會持續在這裡記錄，給自己留下學習的腳印~ 這正式的第一篇隨筆寫個使用css3的動畫效果。 總感覺電影里特工那種酷炫的應用界面很舒服，開始嘗試用css3做一個，所以這是系列篇，名字就叫做 '我要做 ...
  • 初入前端，面對一個項目應註意哪些？
    前言： 對於初入職場的前端小白來說，一整個項目來了，頓時感覺壓力山大，張皇失措，也總會感到手忙腳亂。其實不用怕，拆分步驟，把每個步驟做好，做細，一切都迎刃而解，猶如順藤摸瓜般暢快淋漓。 目錄： 概念的介紹（可略） 項目分哪幾個階段(每個階段註意什麼) 如何排期 解決問題的方法 概念的介紹： PM（產 ...
  • JS內置對象-String對象、Date日期對象、Array數組對象、Math對象
    一、JavaScript中的所有事物都是對象：字元串、數組、數值、函數... 1、每個對象帶有屬性和方法 JavaScript允許自定義對象 2、自定義對象 a、定義並創建對象實例 b、使用函數來定義對象，然後創建新的對象實例 二、JS內置對象-String 1、string對象 string對象用 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類