How to use JAVAscript to zoom in and out SVG images on webpages

First, describe the webpage effect that I want to make. Basically, place the mouse over the image, and scroll the mouse wheel to zoom in and out the image, after you press the mouse, move the mouse to move the image. You can see the specific effect on Baidu (Google) map. Of course... syntaxHighlighter. all (); first, describe the webpage effect that I want to make. Basically, place the cursor over the image, and scroll the mouse wheel to zoom in and out the image, after you press the mouse, move the mouse to move the image. You can see the specific effect on Baidu (Google) map. Of course, the above is just my preliminary idea. There is a problem in the implementation process. Next I will talk about the difficulties and solutions I have encountered, as this is a company project, when it comes to intellectual property rights and confidentiality, I just want to talk about ideas. If you don't want code, write your own code. Question 1: Multi-browser support for mouse pulley time. The browser determines that the scroll of the mouse pulley is determined by the delta value passed during the scroll of the mouse pulley: In the IE kernel browser, the delta value is plus or minus 120, the values in browsers other than IE kernel are plus or minus 3. In addition, in different browsers, the number of times the pulley trigger event is executed is different: in IE kernel browsers, every time the pulley is rolled, The Bound event is triggered twice; in non-IE kernel browsers, the pulley is rolled every time and the event is triggered only once. Of course, this is what we want. Solution: The jquery mousewheel plug-in perfectly solves the problem of multi-browser support for the mouse wheel event. Problem 2: place the svg image into a div element on the webpage (using the embed label, assuming that the size of the set image is the same as that of the div ), the svg image will block the mousedown, mousemove, and mouseup events of the div, so that the image cannot be moved. I have been entangled in this problem for a long time. I have never thought of a solution, nor have I found a solution on the Internet. I just thought that I could directly view the problem if it was used by someone later. Solution: Create a New div, set the position attribute to absolute, and overwrite the div to the div where the svg image is placed, bind the mousedown, mousemove, and mouseup events to this div (in fact, this problem is well solved and I don't know what's going on, I didn't think of it at the beginning ). Question 3: How to use javascript to control svg images. The company's requirement is to directly reference an existing svg image. That is to say, there is no need to change anything about the svg image, in this way, we cannot use some modifications to the transform and g labels on the Internet to control svg. Fortunately, I found a classic svg tutorial, this article details how to use javascript to control images on webpages. Although the example has nothing to do with my project, the idea is absolutely correct. If you want to read this article, directly search for the "classic svg tutorial". I downloaded it from Baidu Library and uploaded it to csdn. If you want to download it, check the author AndrewWatt, others do not know ). In this way, the problem has basically been solved. As for the movement problem, coordinates are obtained in the trigger of the mousedown, mousemove, and mouseup events, respectively, after calculation, you can move the corresponding coordinates of the view area. This article only provides an idea and a memo to my work.