向强大的SVG迈进

SVG 即 Scalable Vector Graphics 可缩放矢量图形，使用XML格式定义图形。

一、SVG印象

SVG 的应用十分广泛，得益于 SVG 强大的各种特性。

1.1、 矢量

可利用 SVG 矢量的特点，描出深圳地铁的轮廓：

1.2、iconfont

SVG 可依据一定的规则，转成 iconfont 使用：

1.3、 foreignObject

利用 SVG 的 foreignObject 标签实现截图功能，原理：foreignObject 内部嵌入 HTML 元素：

<svg xmlns="http://www.w3.org/2000/svg"> <foreignObject> <p>凹凸实验室 欢迎您</p> </foreignObject> </svg>

截图实现流程：

首先声明一个基础的 svg 模版，这个模版需要一些基础的描述信息，最重要的，它要有 <foreignObject></foreignObject> 这对标签；

将要渲染的 DOM 模版模版嵌入 foreignObject 即可；

利用 Blob 构建 svg 对象；

利用 URL.createObjectURL(svg) 取出 URL。

1.4、SVG SMIL

由于微信编辑器不允许嵌入 <style><script><a> 标签，利用SVG SMIL 可进行微信公众号极具创意的图文排版设计，包括动画与交互。
但是也要注意，标签里不允许有id，否则会被过滤或替换掉。

点击 "凹凸实验室" 后，围绕 "凹凸实验室" 中心旋转 360度，点击0.5秒后 出现 https://aotu.io/ ，动画只运行一次。

下图为 GIF循环演示：

代码如下：

<svg 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> <!-- 同一个初始位置以及大致的宽高，触发点击事件 --> <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标签的处理，下面容我来讲述一番。

二、SVG 实现非比例缩放

我们熟知的 iconfont，可通过改变字体大小缩放，但是这是 比例缩放，那如何实现 SVG 的非比例缩放呢？
如下图所示，如何将 一只兔子 非比例缩放？

划重点：实现非比例缩放主要涉及三个知识点：viewport、viewBox和preserveAspectRatio，viewport 与viewBox 结合可实现缩放的功能，viewBox 与 preserveAspectRatio 结合可实现非比例的功能。

2.1、viewport

viewport 表示SVG可见区域的大小。
viewport 就像是我们的显示器屏幕大小，超出区域则隐藏，原点位于左上角，x 轴水平向右，y 轴垂直向下。

通过类似CSS的属性 width、height 指定视图大小：

<svg></svg> 2.2、viewBox

viewBox值有4个数字：x, y, width, height 。
其中 x：左上角横坐标，y：左上角纵坐标，width：宽度，height：高度。
原点默认位于左上角，x 轴水平向右，y 轴垂直向下。

<svg viewBox="0 0 200 100"></svg>

显示器屏幕的画面，可以特写，可以全景，这就是 viewBox。
viewBox 可以想象成截屏工具选中的那个框框，和 viewport 作用的结果就是 把框框中的截屏内容再次在 显示器 中全屏显示。