ng-svg-pan-zoom 是一个用于 Angular 框架下开发的 SVG 缩放、平移组件，它提供了丰富、强大的 API，使得开发者能够更加灵活地控制 SVG 图形的缩放与平移。
安装
在项目根目录下运行以下命令安装 ng-svg-pan-zoom：
npm install ng-svg-pan-zoom --save
安装成功后，在 Angular 应用程序的模块文件中引入 NgSvgPanZoomModule：
-- -------------------- ---- -------
------ - ------------------ - ---- ------------------
-----------
-------- -
-- ---
------------------
--
-- ---
--
------ ----- --------- - -使用
在组件的 HTML 模板中，引入 ng-svg-pan-zoom 模块，如下所示：
<ng-svg-pan-zoom [config]="config">
<svg width="500" height="500">
<!-- ... SVG shapes ... -->
</svg>
</ng-svg-pan-zoom>在组件的 TypeScript 文件中，定义并传递 config 参数：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ - ---- ------------------
------------
--------- ----------
--------- -
---------------- ------------------
---- ----------- -------------
---- --- --- ------ --- ---
------
------------------
-
--
------ ----- ------------ -
------- ------------------ - -
----------- -----
------------ -----
-------------------- -----
--------------------- ----
------------- ----
------------- -----
---- ------
------- -----
-------------------------- -----
--
-使用时，需要传递一个 NgSvgPanZoomConfig 类型的参数，该参数包含了该组件的配置项，如缩放、平移、双击缩放等。
配置项的说明如下：
panEnabled：是否开启平移，默认为true。zoomEnabled：是否开启缩放，默认为true。dblClickZoomEnabled：是否开启双击缩放，默认为true。zoomScaleSensitivity：缩放灵敏度，即每次缩放的比例，默认为 0.2。minZoomScale：最小缩放比例值，默认为 0.2。maxZoomScale：最大缩放比例值，默认为 10。fit：是否以宽度或者高度中较小的那个比例作为 SVG 的缩放比例，且 SVG 在父容器中的位置固定，默认为false。center：是否将 SVG 定位到组件中心位置，默认为true。preventMouseEventsDefault：是否阻止默认的鼠标事件行为，例如当鼠标拖动组件时，页面不会滚动，默认为false。
示例代码
<ng-svg-pan-zoom [config]="config">
<svg width="500" height="500">
<circle cx="250" cy="250" r="100" fill="red"></circle>
<rect x="50" y="50" width="50" height="50" fill="green"></rect>
<text x="100" y="100" style="font-size: 40px;">Hello SVG</text>
</svg>
</ng-svg-pan-zoom>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ - ---- ------------------
------------
--------- ----------
--------- -
---------------- ------------------
---- ----------- -------------
------- -------- -------- ------- --------------------
----- ------ ------ ---------- ----------- --------------------
----- ------- ------- ----------------- ------------ ----------
------
------------------
-
--
------ ----- ------------ -
------- ------------------ - -
----------- -----
------------ -----
-------------------- -----
--------------------- ----
------------- ----
------------- -----
---- ------
------- -----
-------------------------- -----
--
-总结
使用 ng-svg-pan-zoom，我们可轻松地在 Angular 应用程序中创建缩放、平移的 SVG 图形，且提供了丰富的 API，有利于更加灵活地控制 SVG 图形的展示与操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005591d81e8991b448d6908