[英]ZoomIn/ZoomOut on mouse scroll on dynamically created svg elements
I have a application i asp.net i which I have a view page in which my svg elements are dynamically being created. 我有一个应用程序asp.net,我有一个视图页面,其中动态创建了我的svg元素。 Now I want to apply zoom functionality to all the svg elements that have been created.
现在,我想将缩放功能应用于所有已创建的svg元素。 With wheel scroll up it should zoom in and with scroll down it should zoom out
向上滚动时,应放大;向下滚动时,应缩小
<svg id="SomeSVG" viewBox="0 0 1800 1800">
<g id="@someId" class="group" data-name="@lSomeName">
<polygon points="@SomePoints" class="polygon" />
</g>
<svg>
There is a for loop after the svg from where it fetches the data from model and a cluster of polygon gets created. svg之后是一个for循环,它从那里从模型中获取数据,并创建了一个多边形簇。 The id to each group created is unique.
创建的每个组的ID是唯一的。
I have found a jquery plugin that works well wit what I wanted 我找到了一个jQuery插件,可以很好地运行
https://github.com/ariutta/svg-pan-zoom https://github.com/ariutta/svg-pan-zoom
Just need to follow the steps given on the link 只需按照链接上给出的步骤
And If you have more than one group then you don't need to keep the class as viewport. 而且,如果您有多个组,则无需将该类保留为视口。 Because if you do so it will work for only the first element created and if you remove it , then it will work for the whole svg
因为如果这样做,它将仅对创建的第一个元素有效,如果将其删除,则它将对整个svg有效
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.