記一次前端SVG實戰知識分享會

時間 2020-10-18

標籤 css html 前端 html5 java 面試 json 瀏覽器網絡前端工程師欄目 CSS 简体版

原文原文鏈接

記一次前端SVG實戰知識分享會

記錄了我在組內的技術分享, 有一樣需求的同窗能夠參考一下

分享全程下來時間大約 40分鐘

一. svg與前端工程師

1. 做爲一名前端工程師不可能不與svg打交道, 現在掌握svg的基本知識是我們的基本技能.

2. 學svg以前最好先學一學xml的基本知識, 這樣能夠更好的理解文件結構.

3. svg是很不錯, 可是並非任何地方都要使用, 學習不要太刻板.

本篇重點是基礎知識, 但願您看完以後能夠對svg作出一些簡單的修改, 或者是一個小圖片不用再等ui作完給咱們, 咱們能夠本身動手製做.css

二. xml簡介 (不會說的太詳細)

XML 被設計用來傳輸和存儲數據, 指可擴展標記語言（_EX_tensible _M_arkup _L_anguage）
HTML 被設計用來顯示數據。html

這個頭部標籤 <?xml version="1.0" standalone="no"?>

XML標準文件頭
版本號是1.0
standalone表明這個xml文件是獨立的仍是依賴與外部dtd文件的 (做用是定義 XML 文檔的合法構建模塊) 相似java中的接口.

如今不少配置文件仍是用xml的形式好比java代碼, 這些配置文件應該是用json更好.

三. svg簡介

SVG 是使用 XML 來描述二維圖形和繪圖程序的語言。(節選自w3school)前端

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用於網絡的基於矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失
SVG 是萬維網聯盟的標準
SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個總體

什麼是矢量, 矢量圖形: 面向對象的圖像或繪圖圖像，在數學上定義爲一系列由線鏈接的點, 一個一個的圖形對象, 任意的組合.

矢量圖介紹短片html5

不失真屬於老生常談的問題了, 其實在我看來svg圖片能夠被咱們隨便修改他的樣式纔是最重要的, 畢竟一個png文件很差經過代碼修改他的背景色, 或是某一塊的大小比例.
缺點: 在window系統裏, 沒有圖例顯示不方便查看, 在mac電腦裏就有個縮略圖, 沒找照一張圖片還要把svg全打開挨個找...

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

定義了svg的寬高
定義了使用1.1版本svg, 就像html同樣有 4與5, svg的版本也在變化.
xmlns是xml namespace的縮寫，也就是XML命名空間，xmlns屬性能夠在文檔中定義一個或多個可供選擇的命名空間。該屬性能夠放置在文檔內任何元素的開始標籤中。該屬性的值相似於URL，它定義了一個命名空間，瀏覽器會將此命名空間用於該屬性所在元素內的全部內容。

例如SVG< a>元素和HTML< a>若是一個被稱爲svg：a和另外一個html：a,則能夠區分該元素, 做用就是防止svg標籤內的元素與html元素混亂一團.
html5中不寫這句影響也不大.面試

兼容性以下

四. 基本圖形

svg有不少基本圖形如: 矩形、圓形、直線、多點成線、多邊形.
這些圖形咱們能夠直接使用

<?xml version="1.0" standalone="no"?>
<!-- 1: 總體的長寬, 規則定義  -->
<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<!-- 1：矩形 -->
<!-- x, y 左上角的位置 -->
<!-- fill: 填充的顏色 -->
<rect  width="100" height="100" style="x:20; y:20;" />

<!-- 1：圓形 -->
<!-- 2: cx,cy 圓心的座標 -->
<!-- 3: r半徑 -->
<circle cx="70" cy="220" r="50" fill="red"></circle>


<!-- 3: 直線 -->
<!-- 兩個點的座標 -->
<line x1="160" y1="80" x2="300" y2="80" style="stroke:green;stroke-width:16;"></line>

<!-- 4: 多點線 -->
<!-- 會自動把第一個點與最後一個點鏈接起來 -->
<!-- points:一組一組的xy座標 -->
<polyline points="500,60 330,60 420,180"></polyline>

<!-- 5: 多邊形 -->
<polygon points="470,400 450,320 410,320 410,340 410,440" style="fill:red;stroke:red;stroke-width:2"></polygon>
</svg>

如圖所示:json

這裏的寬高與xy的距離你能夠按px理解, 但其實這個是他的比例, 使用的時候會按這個比例等比縮放.
style="stroke:green;stroke-width:16;" 定義: 若是在線內定義的是線條的顏色爲綠色, 線的寬度爲16
style="fill:red;stroke:red;" fill指的是填充顏色, stroke邊的顏色(有時候我面試的同窗說常用svg, 可是fill屬性都不知道, 場面很尷尬.)
style並非絕對的, 好比第一個矩形我也能夠寫成<rect width="100" height="100" x="20" y="20" />
一塊兒其餘屬性: transform="rotate(30)" 旋轉角度,這裏不用寫deg, rx:20;ry:60; 角的弧度能夠作矩形的圓角.
知道了svg無非也就是個dom那咱們就能夠經過獲取元素的形式進行對svg內部圖像的修改了, 好比獲取到這個svg裏面的矩形setAttribute('x', 200)讓他x軸變爲200

五. 視野與視框

<?xml version="1.0" standalone="no"?>

<!-- 1: 視野 -->
<!-- viewBox: 我能看到哪一部分, 當前就是左上角 -->
<!-- viewBox就算小了, 可是總體的寬高是不變的, 因此會有放大縮小效果 -->
<!-- 2: 若是viewport和viewBox的寬高比不相同。你須要本身來指定如何在SVG閱讀器（如瀏覽器）中顯示SVG圖像。你能夠在<svg>中使用preserveAspectRatio屬性來指定。 -->
<!-- preserveAspectRatio   meet就是保持原比例不失真-->
<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="none meet">
<rect 
  width="200" height="200"
  style="x:20; y:20; rx:20;ry:60; fill:rgb(0,0,255);stroke-width:16;
stroke:black"/>

</svg>

1: 不設置viewBox
瀏覽器

2: 設置後
網絡

viewBox不影響總體svg的大小與比例, 只是以多大的窗口展現這個svg圖片前端工程師

六. 樣式分組(事情變得有趣了)

任何形式的代碼都存在如何複用的問題, 咱們不可能在畫出一個不規則圖形而後想再畫一個如出一轍的圖形時, 從新畫一遍

下面是複用"樣式", 在g標籤裏面寫上樣式, 內部的標籤會默認使用.

神奇的 g 標籤

<?xml version="1.0" standalone="no"?>
<!-- 1: <g>標籤分組了, 就有面向對象的概念了 -->
<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<!-- 定義了總體的屬性 -->
<!-- 2: 能夠多層嵌套替換 -->
<g style="fill:rgb(0,0,255);stroke-width:16">
  <rect 
    width="100" height="100"
    style="x:20; y:20; rx:20;ry:60;
  stroke:black"/>

  <rect 
    width="100" height="100"
    style="x:20; y:140; rx:20;ry:60;
  stroke:black"/>
</g>
</svg>

效果以下圖, 如出一轍的兩個圖形

固然<g>標籤也能夠嵌套使用

<?xml version="1.0" standalone="no"?>
<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<g style="fill:rgb(0,0,255);stroke-width:16">
  <rect 
    width="100" height="100"
    style="x:20; y:20; rx:20;ry:60;
  stroke:black"/>

  <rect 
    width="100" height="100"
    style="x:20; y:140; rx:20;ry:60;
  stroke:black"/>
  
  <g style="fill:red;stroke-width:16">
    <rect 
      width="100" height="100"
      style="x:20; y:260; rx:20;ry:60;
    stroke:black"/>
  </g>
</g>
</svg>

如圖:

七. 複用

我畫好的圖形, 我固然能夠複製一份繼續使用啦

使用<use>標籤進行引用圖形, 而且在use標籤上進行新圖形的操做, 能夠直接設置xy之類的東西.

<?xml version="1.0" standalone="no"?>
<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg">
  <g id="cc">
    <rect width="100" height="100" x="20" y="20" />
  </g>
 <use xlink:href="#cc" transform="translate(160,0)" fill="red"/>
</svg>

這裏可能會出現做用域的問題, 可是放在html裏面就沒問題了
後面會講問什麼放在html裏面會好, 已經如何解決這個問題!!!
有問題的同窗能夠用下面的代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg">
  <g id="cc">
    <rect width="100" height="100" x="20" y="20" />
  </g>
 <use xlink:href="#cc" transform="translate(160,0)" fill="red"/>
</svg>
</body>
</html>

效果以下:

玩到這裏是否是有些.svg裏面的代碼在幹什麼已經能看懂小半了!!! 這就是會的越多越開心.

八. 漸變

<?xml version="1.0" standalone="no"?>

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

  <!-- 1: 定義了一組漸變, 設置id方便引用 -->
  <defs>
      <!-- 這裏指定了漸變的區域, 1-0的範圍 -->
      <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>
  <!-- 1: 引入相應的漸變顏色 -->
  <ellipse cx="200" cy="190" rx="85" ry="55"
  style="fill:url(#orange_red)"/>

</svg>

<defs>裏面定義了一組漸變規則, 由於xml只能全部都用標籤標示, 你能夠理解爲這個定義了個類.
<defs>標籤裏面定義的內容是不展現的
<linearGradient> 線性漸變標籤, <radialGradient>放射性漸變標籤(這個原理都同樣)
<stop> 規定了n%的位置的顏色
<ellipse> 是用來作橢圓的

如圖所示:

九. 填充

<?xml version="1.0" standalone="no"?>

<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<!-- 1: 定義填充類 -->
<defs>
<!-- 2: 內容寫在這裏 -->
<pattern id="cc" x="0" y="0" width="0.2" height="0.2">
   <circle cx="10" cy="10" r="10" fill="red">
   </circle>
</pattern>
</defs>
  <rect 
    width="400" height="400"
    fill="url(#cc)"
    style="x:20; y:20; rx:60;ry:60;stroke:black"/>
</svg>

<pattern> 填充功能的標籤
這裏你能夠理解爲div的背景圖案, 可是沒有設置 background-repeat: no-repeat;

如圖所示:

十. path的用法(能夠一口氣畫的好長好長...)

<?xml version="1.0" standalone="no"?>

<svg width="600" height="600" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<!-- 1: 把path當成一支畫筆, path就是一鼓作氣的繪製操做 -->
<!-- 2: M 是移動的xy  m是移動的相對距離 c是curveto曲線圖 -->
<!-- 3: L畫直線 -->
<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>

</svg>

<path>標籤相似一鼓作氣的畫筆, 裏面會有超多繪製操做, 有了這個標籤就能夠很方便的封裝繪製svg的編輯器了.
M153 334 的意思就會在座標爲153 334的點上繪製

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

如圖所示:

簡單的也有

<?xml version="1.0" standalone="no"?>
  <svg width="600" height="600" version="1.1"
xmlns="http://www.w3.org/2000/svg">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

M150 0 繪製起始點座標
L75 200 連線到75 200
L225 200 連線到255 200
Z 結束繪製, 提筆.

如圖所示:

十一. 文本輸入

怎麼可能少了文字的輸入

<?xml version="1.0" standalone="no"?>
<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<!-- 1: 理論上svg並非一個專業處理文字的載體 -->
<!-- 2: style標籤可使用大部分css屬性啦, 不用要px -->
<!-- 3: xy對應的是左下角的基線, 而不是完美的左下角 -->
<!-- 4: 文字的顏色也要放在fill屬性裏面, 這也更符合工程化 -->
<text x="200" y="200" style="font-size:26;" fill="red">蚊子蚊子1</text>
<!-- 5: 針對裏面每個字符設置距離 -->
<!-- dx dy 具體到每一個文字的距離 -->
<!-- 那麼我其實能夠巧用svg來搞點花裏胡哨的 -->
<!-- 用波浪形畫個❤ -->
<!-- 再加上動畫效果, 就是扭動起來的文字啦 -->
<text x="200" y="300" dx="0 20 60 " dy="0 20 40" style="font-size:26;" fill="blue">蚊子蚊子2</text>

<!-- tspan標籤對文字的單獨處理(含鏤空!!!!) -->
<text x="200" y="100" style="font-size:40">
  <tspan fill="red">蚊子3</tspan>
  <tspan stroke="blue" fill="none">蚊子4</tspan>
  </text>
</svg>

<text>標籤用來表示文字
dx定義每一個文字之間的間距
<tspan> 就是<text>裏面單獨處理字符的標籤
fill="none" 就能夠產生扣動字了

如圖所示:

十二. 路徑文本(讓你的文字沿着路徑排列而已)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>textpath</title>
</head>
<body>
<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'>
    <path id="path1" d='M 100 200 Q 200 100 300 200 T 500 200' stroke='rgb(0,255,0)' fill='none'>
    </path>
    <text style='font-size:24px;'>
        <textpath xlink:href='#path1'>
            學來學去學來, 你還學得動嗎哈哈哈!!
        </textpath>
    </text>
</svg>
</body>
</html>

上面使用的path標籤賦予顏色是爲了讓你們看清文字走向
<textpath>標籤須要引用一個走向(今後之後你能夠畫出各類線路的文字, 是否是能夠秀給女友看??)
fill='none'很重要, 否則他會變成面積圖
去掉 fill='none':
加上 fill='none:
加上這個就能夠不用在html文件中才能顯示了, 也就是規定了做用域

<?xml version="1.0" standalone="no"?>
<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<defs>
  <path id="my" d="M 100 200 Q 200 100 300 200 T 500 200" />
</defs>
<text x="10" y="200" style="font-size:26" fill="red">
 <textPath xlink:href="#my">
 學來學去學來, 你還學得動嗎哈哈哈!!
 </textPath>  
</text>
</svg>

xmlns:xlink= 屬性規範了做用域
這意味着文檔可訪問 XLink 的屬性和特性,表示前綴爲xlink的元素應該由理解該規範的UA使用xlink規範來解釋, 你能夠理解爲不與html衝突了.

十三. svg的引入(直接寫svg, <embed> <object> <iframe>標籤引入, 其實img也能夠的 )

使用svg可不僅是把svg放在html結構中

直接寫在html中, 這個我上面演示過,
<embed> 標籤是 HTML 5 中的新標籤, 標籤訂義嵌入的內容，也就至關於把svg結構直接插進來了。
<object> 標籤是 HTML 4 的標準標籤，被全部較新的瀏覽器支持。它的缺點是不容許使用腳本, 向 HTML 代碼添加一個對象, 感受可用於服務端渲染的項目快速取得數據。
iframe都快被淘汰了就別用了, 這裏也不說用法了.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 1: 這個爲啥網上沒人說? -->
  ![](./2.基本圖形.svg)
  <!-- 2: embed標籤引入 -->
  <embed id="cc" src="./2.基本圖形.svg" width="500" height="500"
  type="image/svg+xml"
  pluginspage="http://www.adobe.com/svg/viewer/install/" />
  <!-- 3: object -->
  <object data="./2.基本圖形.svg" width="300" height="100" 
  type="image/svg+xml"
  codebase="http://www.adobe.com/svg/viewer/install/" />
</body>
</html>