美国工厂

今天看看了看Netflix刚出的记录片，American Factory。 记录了中国福耀玻璃在美国俄亥俄州开设工厂的历史。

记录片的剧情大致如下：

1. 2008年，金融危机， GE（通用电气）公司关闭了全球开设的许多工厂，当然也包括了俄亥俄州的那一家，导致一万多员工失去工作，工厂也荒废在那。
2. 2015年，中国的福耀玻璃买下在俄亥俄州的旧工厂，开办了福耀美国公司，招了很多美国工人，这些失业已久的工人又重新有了工作。
3. 由于中美文化上的差异，福耀在管理上面临了一些问题，美国工人觉得中国工司不尊重人权，最后，就请组织公会（UAW）进行维权，声讨福耀，故事开始。
4. 通过一长系列的“战争”，福耀最终解决了这次危机，故事结束。
5. 最后，由于科技的发展，福耀有了新的技术自动化生产，大部分工人不再有价值，再次失业。

最近，拼多多上市，两天，市值300亿美金，就比格力差点了，老板黄峥身价已经超过京东老板刘强东！

做于一个资深互联网工作者以及资深股民，感觉惊呆了！

因为在这新闻之前，压根就没听过过有这么一个公司，还做的这么大，是不是自己太落伍了。

于是我就开始进行知识扩充了，搜了一下，大都是一片骂声！吐槽大军犹如滔滔江水连绵不绝！这样一个卖假货的公司，真的是圈钱么？

目前我们使用的基本上都是SVG1.1版本。虽然SVG2目前还在起草阶段，离具体使用，浏览器兼容还不知道等到猴年马月，但我们可以先浏览一下新特性，

https://svgwg.org/svg2-draft/

d3这个工具包的内容非常丰富，这里只写一入门级别的东西，代你理解一下d3的数据机制。包含主下内容，基础了解的同学就不用看了。

1. Selection 及基础操作
2. 数据绑定
3. merge / filter

d3的API设计风格很符合现在流式编程的范式，简单点说，就是很省代码行数。

动画

与用户合理自然的交互，肯定是少不了动画的存在的，好的产品就是需要遵循人类的习惯，把数据以合理的方式一步一步展现出来，给与用户顺畅、自然的体验。

写在最前面

做为一个技术人士来说，用什么样的技术解决什么的问题，相当重要。

对于本人来说，滤镜、渐变之类的简直就是玄学，但对于我的设计师同事来说，这些就是不值一提的常识。

那么，有没有必要去了解这些东西呢？

个人建议：需要知道这些知识能够发挥什么样的作用，用不着深入学习。

用经济学的术语就是深入学习滤镜之类的原理，是一种边际成本高，边际收入很低的行为，换言之就是性价比低。（我说的是对一般的开发者而言，如果是专门从事此领域就要再换言之一下了。）

但是完全不知道这一块的知识，也是不可取的，比如你可能完全不知道一些炫酷的特效如何产生的，那么你的思维空间就缺失掉了一部分的想象力，所以个人建议还是做个基本了解。现在进入正题：

写到这里，我忽然意识到自己有点孤陋寡闻了，因为我看到现在好多设计师都没有使用 PS 了，而是使用 Sketch 和 AI 之类的失量工具做创作，作品都是支持转成SVG的。

我现在也看到了越来越多的网站，里面使用图片也是SVG , 比如 <image src="xx.svg"> ，import svg from './xx.svg' 等等。效果其实一点也不逊于 png、jpg!

做为一个刚接触SVG编程的小粉，发现SVG适用的领域还很多，还是很欣慰的，也搞清楚了很多事情。比如之前一直不理解SVG为什么需要有这么多种使用样式的方式，现在知道了。

有大神说过，20%的知识点解决80%的问题，剩下的20%的问题需要用80%的知识点来解决。

SVG看上去简单，其实内容还是相当丰富的，所以本教程只写一下个人的观点，以及总结一些常用的说明，保证20%以上，剩下的80%我会贴出一些个人认为不错的链接过来扩展阅读。（可能会有英文链接，有阅读能力的建议是英文优先）

SVG文档结构：标签

先总结一下SVG的常用标签，这里使用列位熟悉的HTML来打个比方，不能算很恰当，理解即可。