在动态创建的 svg 元素上滚动鼠标时放大/缩小

ZoomIn/ZoomOut on mouse scroll on dynamically created svg elements

本文关键字：鼠标 放大 缩小 滚动 创建 动态 svg 元素      更新时间：2023-09-26

我有一个应用程序，我 asp.net 我有一个视图页面，其中动态创建我的 svg 元素。现在，我想将缩放功能应用于已创建的所有 svg 元素。滚轮向上滚动时应放大，向下滚动时应缩小

 <svg id="SomeSVG" viewBox="0 0 1800 1800">
 <g id="@someId" class="group" data-name="@lSomeName">
 <polygon points="@SomePoints" class="polygon" /> 
 </g>
 <svg>

在 svg 之后有一个 for 循环，它从那里从模型中获取数据并创建一个多边形集群。创建的每个组的 id 都是唯一的。

我找到了一个jquery插件，它可以很好地满足我想要的效果

https://github.com/ariutta/svg-pan-zoom

只需要按照链接上给出的步骤进行操作

如果你有多个组，那么你不需要将类保留为视口。因为如果你这样做，它只适用于创建的第一个元素，如果你删除它，那么它将适用于整个 svg

相关文章：