svg 學(xué)習 - 基礎(chǔ)知識

參考：
w3school => svg-v1.1
svg-mdn
菜鳥教程
參考手冊
百度文庫-svg基礎(chǔ)

其他網(wǎng)站：
與其他文件類型進行轉(zhuǎn)換：鏈接
顯示 svg 工具：鏈接 | 鏈接

what

SVG 指的是可伸縮矢量圖形 (Scalable Vector Graphics),即放大或者縮小不失真，使用 XML 格式定義圖形。
包含形狀、樣式、標記、濾鏡、漸變等。
預(yù)定義了七種形狀元素：矩形(rect)、圓形(circle)、橢圓(ellipse)、線段(line)、折線(polyline)、多邊形(polygon)、路徑(path)。

why

與其他圖像格式相比，使用 SVG 的優(yōu)勢有以下幾點：

  • SVG 可被非常多的工具讀取和修改（比如記事本）
  • SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
  • SVG 是可伸縮的
  • SVG 圖像可在任何的分辨率下被高質(zhì)量地打印
  • SVG 可在圖像質(zhì)量不下降的情況下被放大
  • SVG 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）
  • SVG 可以與 Java 技術(shù)一起運行
  • SVG 是開放的標準
  • SVG 文件是純粹的 XML
  • 相比 css 來講，兼容性更好，早于 css3 實現(xiàn)一些特殊效果，功能強大

適用于 大型渲染區(qū)域，如百度地圖，不適合游戲。用途：

  • 靜態(tài)圖形繪制
  • 動態(tài)動畫效果
  • 專門事件綁定

how

入門實例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="110" height="50"
    style="position:absolute;left:120px;top:0;">
    <circle cx="10" cy="10" r="10" fill="rgba(255, 255, 255, 0.1)" stroke-width="0"></circle>
</svg>

要點說明：

  1. 以 svg 標簽包含，version 為 svg 的版本，xmlns 定義 svg 命名空間
  2. circle 標簽創(chuàng)建一個圓，cx 和 cy 屬性定義圓的中心坐標，默認是（0，0），r 為半徑， fill 為填充顏色， stroke-width 為邊框?qū)拵?/li>

坐標定位

對于所有元素，SVG 使用的坐標系統(tǒng)或者說網(wǎng)格系統(tǒng)，和Canvas用的差不多（所有計算機繪圖都差不多）。這種坐標系統(tǒng)是：以頁面的左上角為 (0,0) 坐標點，坐標以像素為單位，x 軸正方向是向右，y 軸正方向是向下。注意，這和你小時候所教的繪圖方式是相反的。但是在 HTML 文檔中，元素都是用這種方式定位的。


內(nèi)置圖形的 html 屬性 或 css 樣式

fill(填充顏色)
fill-opacity(填充透明度)

stroke(邊框顏色)
stroke-width(邊框?qū)挾?
stroke-opacity(邊框透明度)
stroke-dasharray(創(chuàng)建虛線)
stroke-linecap(路徑的終結(jié)樣式)

transform(變換)
filter(濾鏡)(url[#濾鏡id])

常見圖形用法

1. 矩形(rect)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="10" ry="10" width="50" height="50" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

試一試

  • x 屬性定義矩形的左側(cè)位置（例如，x="0" 定義矩形到瀏覽器窗口左側(cè)的距離是 0px）
  • y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）
  • rx 和 ry 屬性可使矩形產(chǎn)生圓角。

2. 圓形(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>
  • cx 屬性定義的橢圓中心的x坐標
  • cy 屬性定義的橢圓中心的y坐標

3. 橢圓(ellipse)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
  • rx 屬性定義的水平半徑
  • ry 屬性定義的垂直半徑

4. 線段(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 軸定義線條的結(jié)束
  • y2 屬性在 y 軸定義線條的結(jié)束

5. 折線(polyline)

<polyline> 元素是用于創(chuàng)建任何只有直線的形狀。

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

6. 多邊形(polygon)

<polygon> 標簽用來創(chuàng)建含有不少于三個邊的圖形。
多邊形是由直線組成，其形狀是"封閉"的（所有的線條 連接起來）。

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
  • points 屬性定義多邊形每個角的 x 和 y 坐標

7. 路徑(path)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 0 L75 200 L225 200 Z" />
</svg>
  • d 路徑數(shù)據(jù)： 
    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

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


8. 文本(text)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink: target="_blank">
    <text x="0" y="15" fill="red">I love SVG</text>
  </a>  
  <!--可點擊的 text -->
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
  </defs>
  <!--遵循 path1 路徑排列的文本--> 
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
  </text>
</svg>

9. <defs> 和 <g>

所有互聯(lián)網(wǎng)的SVG濾鏡定義在<defs>元素中。<defs>元素定義短并含有特殊元素（如濾鏡）定義。
<filter>標簽用來定義SVG濾鏡。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
    <radialGradient id="irisGradient" >
        <stop offset="25%" stop-color="green" />
        <stop offset="100%" stop-color="dodgerblue" />  
    </radialGradient>
</defs>
<g id="eye">
    <ellipse cx="125" cy="50" rx="50" ry="25" fill="none" stroke="black" />
    <circle cx="125" cy="50" r="25" fill="url(#irisGradient)" />
    <circle cx="125" cy="50" r="10" fill="black" />
    <use xlink:href="#eye" x="250" fill="dodgerblue" />
</g>
</svg>
  • <defs> 定義可復(fù)用的部件
  • <g> 定義統(tǒng)一的樣式

10. 事件

常用的時間有 onclick \ onactivate \ onmousedown \ onmouseup \ onmouseover \ onmousemove \ onmouseout \ onload \ onresize \ onunload \ onrepeat

svg 嵌入 Html 中

<embed>

<embed src="circle1.svg" type="image/svg+xml" />

<object>

<object data="circle1.svg" type="image/svg+xml"></object>

<iframe>

<iframe src="circle1.svg"></iframe>

<svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="60" cy="60" r="60" fill="red" />
</svg>

svg 濾鏡

新增參考連接：鏈接->點擊 | 鏈接2

SVG可用的濾鏡是（19個）：

feBlend - 與圖像相結(jié)合的濾鏡
feColorMatrix - 用于彩色濾光片轉(zhuǎn)換
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting - 散射光照明
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - 過濾陰影
feSpecularLighting - 鏡面照明
feTile
feTurbulence
feDistantLight - 用于照明過濾
fePointLight - 用于照明過濾
feSpotLight - 用于照明過濾

可以用濾鏡實現(xiàn)想要的模糊、陰影等等效果（用來增加對SVG圖形的特殊效果），類似 css 濾鏡中blur()、contrast()、drop-shadow()， for example:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0">
      <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>
  • <filter>元素id屬性定義一個濾鏡的唯一名稱
  • in="SourceGraphic"這個部分定義了由整個圖像創(chuàng)建效果
  • <rect>元素的濾鏡屬性用來把元素鏈接到"f1"濾鏡
  • result 用于 中間結(jié)果的輸出(也稱作 primitives 圖元)，其他濾鏡可以使用 in 屬性導(dǎo)入 result
  • in2 用于接收某個 result 輸出，在此效果上面進行過濾

多個濾鏡合并使用

在不同的濾鏡利用 result 和 in 屬性，可以實現(xiàn)在前一個基本變換基礎(chǔ)上建立另一個操作。其中可能涉及的標簽可能有feComposite|feMerge|feFlood等。

  • feMerge 濾鏡允許同時應(yīng)用濾鏡效果而不是按順序應(yīng)用濾鏡效果。
  • 遵循 后輸入 的層級更高的原則。
<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="SourceAlpha" 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>

標簽屬性

基本每個濾鏡標簽都有的屬性:

x,y - 坐標
width,height - 寬|高
result - 定義一個濾鏡效果的輸出名稱，以便 in
in - 指定濾鏡效果的輸入源，可以是某個 result ，也可以是下面 6 個值：
    SourceGraphic - 圖形元素本身作為 輸入源
    SourceAlpha - 與 SourceGraphic，相比不同在于 只使用元素的非透明部分
    BackgroundImage 
    BackgroundAlpha
    FillPaint
    StrokePaint

混合模式

css 中，有混合模式 mix-blend-mode 和 background-blend-mode。
svg 中有 5 個 - normal(正常) | multiply(正片疊底) | screen(濾色) | darken(變暗) | lighten(變亮)

<feColorMatrix>

該濾鏡基于轉(zhuǎn)換矩陣對顏色進行變換。每一像素的顏色值（[紅，綠，藍，透明度]的矢量）都經(jīng)過矩陣乘法 (matrix multiplated) 計算出的新顏色。

// 包含兩個私有屬性
type:  saturate | hueRotate | luminanceToAlpha | matrix
values:  0.0 - 1.0 | 0.0 - 360 | 只有一個效果 | 4x5 的矩陣

saturate 和 hueRotate 與 css 中 filter 中的 saturate 和 hue-rotate 作用一模一樣。

圖形的表示：數(shù)字圖形的本質(zhì)是一個多維矩陣，把圖像的R分量放進紅色通道里，B分量放到藍色通道里，G分量放到綠色通道里，經(jīng)過處理，顯示在屏幕上的是我們看到的彩色圖像。

// 矩陣計算得到 rgba() 值
/*R G B A 1*/
1 0 0 0 0 = 1*R + 0*G + 0*B + A*0 + 0 //R
0 1 0 0 0 = 0*R + 1*G + 0*B + A*0 + 0 //G
0 0 1 0 0 = 0*R + 0*G + 1*B + A*0 + 0 //B
0 0 0 1 0 = 0*R + 0*G + 0*B + A*1 + 0 //A

兩種光源及其他

光照濾鏡

是 svg 區(qū)別于 css 的獨特魅力。
feSpecularLighting（鏡面照明） | feDiffuseLighting （散射光照明） 都為光照濾鏡，使用它們照亮一個源圖形。
feDiffuseLighting : 來自外部光源，適合模擬太陽光或者燈光照明
feSpecularLighting : 指定從反射面反射的二次光

形態(tài)濾鏡 <feMorphology>

feMorphology ：形態(tài)濾鏡，輸入源是 圖形的 alpha 通道，利用 operator 設(shè)置腐蝕（變薄 erode）或者擴張（加粗 dilate）, 默認 erode, radius 標識筆觸的大小，該模式下的效果程度，默認 0 。

紋理濾鏡 <feTurbulence>

turbulence 為 湍流，不穩(wěn)定氣流，svg 能夠?qū)崿F(xiàn)半透明或者波狀圖像，利用 Perlin 噪聲函數(shù) 可以實現(xiàn) 人造紋理。
feTurbulence : 可以創(chuàng)建紋理圖作為置換圖，不需要借助外部圖形的紋理效果，即可創(chuàng)建復(fù)雜的效果。三個需要注意的屬性：

type - fractalNoise (分形噪聲更加平滑，更接近云霧)| turbulence (湍流噪聲)
baseFrequency - 噪聲函數(shù)的基本頻率的參數(shù)，頻率越小，產(chǎn)生的圖形越大， 取值在 0.02 ~ 0.2 
numOctaves - 噪聲函數(shù)的精細度，數(shù)值越高，噪聲更詳細，默認值為 1

示意兩種噪聲效果

映射置換濾鏡 <feDisplacementMap>

feDisplacementMap 為映射置換濾鏡，需要掌握很多 PhotoShop 紋理創(chuàng)建或者是圖形色彩相關(guān)的知識。使用該濾鏡用于改變元素和圖形的像素位置，將遍歷原圖的所有像素點，映射到新的位置，形成新圖形?？梢詫⒓y理濾鏡過后的圖形進行形變、扭曲、液化等等，轉(zhuǎn)化的一個公式-P（x + scale * (XC*(x,y) - 0.5, y + scale * (YC*(x,y) - 0.5) → P(x,y)。

svg 漸變

漸變是一種從一種顏色到另一種顏色的平滑過渡。另外，可以把多個顏色的過渡應(yīng)用到同一個元素上。
SVG漸變主要有兩種類型：

  • Linear(線性漸變<linearGradient>)
  • Radial(放射漸變<radialGradient>)

<linearGradient>標簽必須嵌套在<defs>的內(nèi)部。
線性漸變可以定義為水平，垂直或角漸變：

  • 當y1和y2相等，而x1和x2不同時，可創(chuàng)建水平漸變
  • 當x1和x2相等，而y1和y2不同時，可創(chuàng)建垂直漸變
  • 當x1和x2不同，且y1和y2不同時，可創(chuàng)建角形漸變
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad" 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>
    <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>
    <style>
        .ellipse {
            fill: url(#grad);
        }
    </style>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" class="ellipse" />
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
  • 可以利用 class 或者 id 在 style 里面寫 fill 或者 filter。url 是 css 濾鏡屬性的關(guān)鍵字之一，允許引入特定的 svg 過濾器，極大增強了 css 濾鏡的能力。

好用的庫

svg.js

  • 更加接近原生 svg 語法，可以直觀的操作 svg。svg.js 更快，兼容性好，上手更方便。
  • 免費開源。輕量級，總共只有16kb。

Snap.svg

  • Snap.svg 更接近 jquery 的語法，其更全，功能豐富。
  • JavaScript庫，可以跨任何類型的 svg 工作，包括從 Illustrator\InkScape 或者 HTML。

其他

Paper.js, 拉斐爾, Two.js, Velocity.js, Vivus.js

如果您都能看到這里了，對您有用的話，可以點個贊不@*@

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容