什么是 snap.svg.zpd
snap.svg.zpd 是一个基于 Snap.svg 的 JavaScript 库，用于实现 Scalable Vector Graphics（SVG）的缩放、拖动和旋转等交互功能。它能够轻松地将 SVG 图像变成可交互的 Web 组件。
安装与引入
你可以使用 npm 安装 snap.svg.zpd：
npm install snap.svg.zpd
引入 snap.svg 和 snap.svg.zpd：
<script src="https://cdn.jsdelivr.net/npm/snapsvg/dist/snap.svg-min.js"></script> <script src="node_modules/snap.svg.zpd/dist/snap.svg.zpd.min.js"></script>
快速上手
使用 snap.svg.zpd，你需要创建一个 SVG 元素并提供其 ID，在 JavaScript 中引用该元素，并初始化 snap.svg.zpd 实例。以下是一个简单的示例：
<svg id="my-svg"></svg>
const s = Snap('#my-svg');
s.rect(10, 10, 100, 100);
s.zpd();在这个示例中，我们创建了一个带有 ID 为 my-svg 的空 SVG 元素，并在其中绘制了一个矩形。然后我们通过传递 SVG 元素的 ID 来初始化 snap.svg.zpd。现在，你可以在网页上看到该 SVG 元素，并且可以对其进行缩放、拖动和旋转等交互操作了。
API 参考
初始化
zpd(options)
初始化 snap.svg.zpd 实例。
参数：
options：可选，包含以下属性：zoom: 可以缩放的最小和最大级别。默认值为{ min: 0.5, max: 5 }pan: 可以平移的最小和最大距离（以像素为单位）。默认值为{ x: 10, y: 10 }drag: 是否启用拖拽。默认值为truerotate: 是否启用旋转。默认值为falsecallback: 回调函数，当发生缩放、平移或旋转时触发
缩放
zoom(scale, animate)
缩放 snap.svg 元素。
参数：
scale: 缩放比例（介于options.zoom.min和options.zoom.max之间）animate: 是否使用动画效果。默认为false
zoomIn(animate)
放大 snap.svg 元素。
参数：
animate: 是否使用动画效果。默认为false
zoomOut(animate)
缩小 snap.svg 元素。
参数：
animate: 是否使用动画效果。默认为false
平移
pan(deltaX, deltaY, animate)
平移 snap.svg 元素。
参数：
deltaX: 水平方向平移距离（以像素为单位）deltaY: 垂直方向平移距离（以像素为单位）animate: 是否使用动画效果。默认为false
panLeft(distance, animate)
向左平移 snap.svg 元素。
参数：
distance: 平移距离（以像素为单位）animate: 是否使用动画效果。默认为false
panRight(distance, animate)
向右平移 snap.svg 元素。
参数：
distance: 平移距离（以像素为单位）animate: 是否使用动画效果。默认为false
panUp(distance, animate)
向上平移 snap.svg 元素。
参数：
distance: 平移距离（以像素为单位）animate: 是否使用动画效果。默认为false
panDown(distance, animate)
向下平移 snap.svg 元素。
参数：
distance: 平移距离（以像素为单位）animate: 是否使用动画效
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38508