SVG全图鉴

有些无心插柳柳成荫的偶然，就像夏天某个夜晚乍起的清风，让你尚未意识到闷热，便沐浴到一阵清凉，猝不及防又豁然开朗，我不知道该如何表达这份不期而遇+，只能将其归结为巧了。

在窥探了vector-effect完全体的能力之后，对这些命运多舛却彪悍如斯的属性，突然多了很多期待，试想一下，若有一天，天下大赦，它们得以含冤昭雪，真到了那时前端世界又会是怎样一番光怪陆离的景象呢？

transform作为CSS世界中最重要的属性之一，它的出现让原本枯燥单调的HTML变得生动了起来。 那片瑰丽的前端世界，既然CSS transform可往，SVG transform亦可往。

<text>在SVG中是一个很特殊的标签，首先它有自己专属的子元素<tspan>和<textPath>，这是什么概念呢？ SVG中能有自己专属的子标签的，<text>可以说是独一份了。

很早之前做过一个项目，是用SVG去实现节点之间的关系，并且连线上要有箭头表示数据的走向，当时对于箭头的坐标计算着实费了一番功夫。

要搞懂SVG，那么stroke和fill这两种把SVG压的死死的绘制形式是绕不开的话题，之前聊过了stroke，今天就趁热打铁把fill也一并给扒一扒。

对于SVG来讲，呈现方式无非只有两种，stroke（描边） 和 fill（填充），无论是用颜色还是图案来描边或填充，都只能被这仅有的两种形式压的死死的。

SVG毕竟也是DOM中的一员，所以除了单纯的展示之外，挂点事件之类的操作也是分内之事，不过，SVG在实践交互的过程中，总是会出现一些奇奇怪怪的现象，今天我们就来聊聊关于SVG交互的那些事。

首先，抛出一个小问题，前几篇的演示案例中，<svg>标签总会出现一个viewBox属性，那么它是什么呢？想要弄清楚这个属性，就必须要了解另一个概念viewPort。

上一篇《SVG擅长些啥》里，每每说到那些功能时，都要好好的拉踩一下CSS，毕竟是SVG的专场嘛，不过，所谓金无足赤人无完人，技术也同理，SVG在实际生产的使用过程中，也有着很多让人使用体验极差的地方。

上一篇我们说到SVG发展史时就讲到了，早期的Web领域，擅长图形展示的SVG被擅长图文展示的CSS+DIV按在地上摩擦，直到近些年进入了视觉效果大内卷时代，SVG才渐渐有了我命由我不由CSS的底气。

为啥要学SVG，背景图不香吗？ SVG高深莫测，Canvas讳莫如深，只有background-image才是永远滴神。