SVG开源项目HuayouJS开发笔记

1.什么是HuayouJS

HuayouJS是一个基于SVG（Scalable Vector Graphics）的2D图形JavaScript组件库，它提供了原生SVG未具有的平移（Pan）和缩放（Zoom）功能，同时支持按图层管理SVG 图形元素。

HuayouJS定义了Metadata、Defs、Style及Layer等一系列图形对象，在内部高效的实现了zoomAndPan特性，并配合SVG 原生对象模型和API，开发者可以快速构建任何SVG图形应用。

2.HuayouJS解决什么问题

SVG规范中，对zoomAndPan（SVG文档整体缩放和平移）特性做了如下描述：

A magnify operation has the effect of a supplemental scale and translate transformation placed at the outermost level on the SVG document fragment (i.e., outside the outermost svg element).

Panning represents a translation (i.e., a shift) transformation on an SVG document fragment in response to a user interface action.

并要求svg文档片段中最外层的svg元素具有属性“zoomAndPan”，用于支持SVG文档整体平移和缩放。（The outermost svg element in an SVG document fragment has attribute ‘zoomAndPan’, which takes the possible values of disable and magnify, with the default being magnify.）

但遗憾的是，SVG规范中也明确指出，应用zoomAndPan 属性是有风险的，因为它没有已知的实现，也不太可能实现。（The zoomAndPan attribute is at risk, it has no known implementations and is unlikely to be implemented. See Github issue #56.）。截至当前，zoomAndPan特性没有得到包括chrome在内的任何主流浏览器支持。

但zoomAndPan是任何图形应用中所必须具有的基本特性，正是在这样的背景下，SVG图形应用开发者在实现zoomAndPan特性时，就有了各种不同的选择，有些开发者自己动手实现，而有些借助第三方库来解决问题。

客观来讲，在SVG中自行实现单纯的zoomAndPan特性并不复杂，但由于平移和缩放会带来一系列相关需求，比如在平移缩放过程中提供回调机制来进一步控制平移缩放行为，或是当屏幕或浏览器大小发生变化时，提供resize事件来调整缩放比例控制图形内容来自适应窗口大小，以及由于平移缩放操作导致视口坐标系统（viewport coordinate system）和用户坐标系统（user coordinate system）的转换问题，等等，想系统性的处理这些需求并非易事，需要大量设计和代码工