向強大的SVG邁進

時間 2020-06-29

標籤強大 svg 邁進简体版

原文原文鏈接

做者：凹凸曼 - 暖暖css

SVG 即 Scalable Vector Graphics 可縮放矢量圖形，使用XML格式定義圖形。html

1、SVG印象

SVG 的應用十分普遍，得益於 SVG 強大的各類特性。git

1.一、矢量

可利用 SVG 矢量的特色，描出深圳地鐵的輪廓： github

1.二、iconfont

SVG 可依據必定的規則，轉成 iconfont 使用：小程序

1.三、 foreignObject

利用 SVG 的 foreignObject 標籤實現截圖功能，原理：foreignObject 內部嵌入 HTML 元素：微信小程序

<svg xmlns="http://www.w3.org/2000/svg">
	<foreignObject width="120" height="60">
		<p style="font-size:20px;margin:0;">凹凸實驗室 歡迎您</p>
	</foreignObject>
</svg>
複製代碼

截圖實現流程：sass

首先聲明一個基礎的 svg 模版，這個模版須要一些基礎的描述信息，最重要的，它要有 <foreignObject></foreignObject> 這對標籤；
將要渲染的 DOM 模版模版嵌入 foreignObject 便可；
利用 Blob 構建 svg 對象；
利用 URL.createObjectURL(svg) 取出 URL。

1.四、SVG SMIL

因爲微信編輯器不容許嵌入 <style><script><a> 標籤，利用SVG SMIL 可進行微信公衆號極具創意的圖文排版設計，包括動畫與交互。可是也要注意，標籤裏不容許有id，不然會被過濾或替換掉。安全

點擊 "凹凸實驗室" 後，圍繞 "凹凸實驗室" 中心旋轉 360度，點擊0.5秒後出現 aotu.io/ ，動畫只運行一次。bash

下圖爲 GIF循環演示：微信

代碼以下：

<svg width="360" height="300" xmlns="http://www.w3.org/2000/svg">
    <g>
        <!-- 點擊後 運行transform旋轉動畫，restart="never"表示只運行一次 -->
        <animateTransform attributeName="transform" type="rotate" begin="click" dur="0.5s" from="0 100 80" to="360 100 80" fill="freeze" restart="never" />
        <g>
            <text font-family="microsoft yahei" font-size="20" x="50" y="80">
                凹凸實驗室
            </text>
        </g>
        <g style="opacity: 0;">
            <!-- 同一個初始位置以及大體的寬高，觸發點擊事件 -->
            <text font-family="microsoft yahei" font-size="20" x="50" y="80">https://aotu.io/</text>
            <!-- 點擊後 運行transform移動動畫，改變文本的位置 -->
            <animateTransform attributeName="transform" type="translate" begin="click" dur="0.1s" to="0 40" fill="freeze" restart="never" />
            <!-- 點擊0.5秒後 運行opacity顯示動畫 -->
            <animate attributeName="opacity" begin="click+0.5s" from="0" to="1" dur="0.5s" fill="freeze" restart="never" />
        </g>
    </g>
</svg>
複製代碼

以上是鄙人對SVG的大體印象，最近的需求開發再次刷新了個人認知，那就是 SVG實現非比例縮放以及小程序不支持SVG標籤的處理，下面容我來說述一番。

2、SVG 實現非比例縮放

咱們熟知的 iconfont，可經過改變字體大小縮放，可是這是比例縮放，那如何實現 SVG 的非比例縮放呢？以下圖所示，如何將一隻兔子非比例縮放？

劃重點：實現非比例縮放主要涉及三個知識點：viewport、viewBox和preserveAspectRatio，viewport 與viewBox 結合可實現縮放的功能，viewBox 與 preserveAspectRatio 結合可實現非比例的功能。

2.一、viewport

viewport 表示SVG可見區域的大小。 viewport 就像是咱們的顯示器屏幕大小，超出區域則隱藏，原點位於左上角，x 軸水平向右，y 軸垂直向下。

經過相似CSS的屬性 width、height 指定視圖大小：

<svg width="400" height="200"></svg>
複製代碼

2.二、viewBox

viewBox值有4個數字：x, y, width, height 。其中 x：左上角橫座標，y：左上角縱座標，width：寬度，height：高度。原點默認位於左上角，x 軸水平向右，y 軸垂直向下。

<svg width="400" height="200" viewBox="0 0 200 100"></svg>
複製代碼

顯示器屏幕的畫面，能夠特寫，能夠全景，這就是 viewBox。 viewBox 能夠想象成截屏工具選中的那個框框，和 viewport 做用的結果就是把框框中的截屏內容再次在顯示器中全屏顯示。

（圖片來源： SVG 研究之路 (23) - 理解 viewport 與 viewbox）

2.三、preserveAspectRatio

上圖的紅色框框和藍色框框，剛好和顯示器的比例相同，若是是下圖的綠色框框，怎樣在顯示器屏幕中顯示呢？

2.3.一、定義

preserveAspectRatio 做用的對象是 viewBox，使用方法以下：

preserveAspectRatio="[defer] <align> [<meetOrSlice>]"
// 例如 preserveAspectRatio="xMidYMid meet"
複製代碼

其中 defer 此時不是重點，暫且忽略，主要了解 align 和 meetOrSlice 的用法：

align：由兩個名詞組成，分別表明 viewbox 與 viewport 的 x 方向、y方向的對齊方式。

值	含義
`xMin`	viewport 和 viewBox 左邊對齊
`xMid`	viewport 和 viewBox x軸中心對齊
`xMax`	viewport 和 viewBox 右邊對齊
`YMin`	viewport 和 viewBox 上邊緣對齊。注意Y是大寫。
`YMid`	viewport 和 viewBox y軸中心點對齊。注意Y是大寫。
`YMax`	viewport 和 viewBox 下邊緣對齊。注意Y是大寫。

meetOrSlice：表示如何維持高寬的比例，有三個值 meet、slice、none。
- meet - 默認值，保持縱橫比縮放 viewBox 適應 viewport，可能會有餘留的空白。
- slice - 保持縱橫比同時比例小的方向放大填滿 viewport，超出的部分被剪裁掉。
- none - 扭曲縱橫比以充分適應 viewport。

2.3.二、例子

例子1：preserveAspectRatio="xMidYMid meet" 表示綠色框框與顯示器的 x 方向、y方向的中心點對齊；

例子2：preserveAspectRatio="xMidYMin slice" 表示綠色框框與顯示器的 x 方向中心點對齊，Y 方向上邊緣對齊，保持比例放大填滿顯示屏後超出部分隱藏；

例子3：preserveAspectRatio="xMidYMid slice" 表示綠色框框與顯示器的 x 方向、y方向的中心點對齊，保持比例放大填滿顯示屏後超出部分隱藏；

例子4：preserveAspectRatio="none" 無論三七二十一，隨意縮放綠色框框，填滿顯示屏便可；這就是非比例縮放的答案了。

3、小程序不支持svg標籤怎麼辦

微信小程序官方不支持 SVG 標籤的，可是決定曲線救國，至關於本身實現了一個SVG標籤：使用小程序內置的 Canvas 渲染器，在 Cax 中實現 SVG 標準的子集，使用 JSX 或者 HTM（Hyperscript Tagged Markup） 描述 SVG 結構行爲表現。

可是今天我想講講其餘的。咱們知道，小程序雖然不支持 SVG 標籤，可是支持 svg 轉成 base64 後做爲 background-image 的 url，如 background-image: url("data:image/svg+xml.......) 。

可是我這邊還有個需求，隨時更改 SVG 每一個路徑的顏色，即顏色可配置：

來回轉 Base64 確定是比較麻煩的，有沒有更好的方式呢？ 直接貼答案：對於SVG圖形，還有更好的實現方式，就是直接使用SVG XML格式代碼，無需進行base64轉換。

3.一、URL 編碼

直接使用 SVG XML 格式代碼，首先要了解 Data URI的格式。 劃重點：base64非必選項，不指定的時候，後面的 <data> 將使用 URL編碼。

3.1.一、入門

百分號編碼(Percent-encoding), 也稱做URL編碼(URL encoding)，是特定上下文的統一資源定位符 (URL)的編碼機制。

原理：ASCII 字符 = % + 兩位 ASCII 碼（十六進制）。例如，字符 a 對應的 ASCII 碼爲 0x61，那麼 URL 編碼後獲得 %61 。

3.1.二、URL 編碼壓縮

前言：

Data URI 的格式中的 <data> 徹底使用URL 編碼也是能夠的，如 encodeURIComponent('<svg version="1.1" viewBox= …</svg>')。可是和轉義前原始SVG相比，可讀性差了不少，並且佔用體積也變大了。若是深刻了解URL 編碼的話，<data> 不必所有編碼的。

正文：

RFC3986文檔規定，URL中只容許包含未保留字符以及全部保留字符。

未保留字符：包含英文字母（a-zA-Z）、數字（0-9）、-_.~ 4個特殊字符。對於未保留字符，不須要百分號編碼。
保留字符：具備特殊含義的字符 :/?#[]@ (分隔Url的協議、主機、路徑等組件) 和 !$&'()*+,;= （用於在每一個組件中起到分隔做用的，如&符號用於分隔查詢多個鍵值對）。
受限字符或不安全字符：直接放在Url中的時候，可能會引發解析程序的歧義，所以這部分須要百分號編碼，如%、空格、雙引號"、尖號 <>等等。

綜上所述，只須要對受限字符或不安全字符進行編碼便可。

JS 處理比較簡單，利用 replace 將須要編碼的字符替換掉便可，基本替換如下的符號就夠用了：

svgToUrl (svgData) {
    encoded = encoded
      .replace(/<!--(.*)-->/g, '') // 親測必須去掉註釋
      .replace(/[\r\n]/g, ' ') // 親測最好去掉換行
      .replace(/"/g, `'`) // 單引號是保留字符，雙引號改爲單引號減小編碼 .replace(/%/g, '%25') .replace(/&/g, '%26') .replace(/#/g, '%23') .replace(/{/g, '%7B') .replace(/}/g, '%7D') .replace(/</g, '%3C') .replace(/>/g, '%3E') return `data:image/svg+xml,${encoded}` } 複製代碼

若是使用在 CSS 中，可利用 SASS版本3.3以上的三個API 對 SVG字符串作替換處理。
1. str_insert(string, insert, index)：從 $string 第 $index 插入字符 $insert；
2. str_index(string, substring): 返回 $substring 在 $string 中第一個位置；
3. str_slice(string, start_at, end_at = nil): 返回從字符 $string 中第 $start_at 開始到 $end_at 結束的一個新字符串。
前人已有總結，可前往 https://github.com/leeenx/sass-svg/blob/master/sass-encodeuri.scss 查看完整代碼。