ZoomIn/ZoomOut on mouse scroll on dynamically created svg elements

Question

I have a application i asp.net i which I have a view page in which my svg elements are dynamically being created. Now I want to apply zoom functionality to all the svg elements that have been created. 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. The id to each group created is unique.

Answer 1

I have found a jquery plugin that works well wit what I wanted

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