Svg translation, zoom in, zoom out, and js operations svg

In svg graphics, a very important concept is the coordinate system. First, analyze the attributes of width, height, and viewBox. Width: width. This width refers to the actual size used in the page, which is the same as the width defined in the div. Height: height, meaning the same as above. ViewBox: View box, which is represented by a string in the format of "0 0 2050 1000", ---> (ULCx ULCy UUwidth UUheight) ULCx and ULCy indicate "x" in the upper left corner and "y" in the upper left corner 」. UUwidth and UUheight indicate that the "user unit width" and "user unit height" are generally in the user space, plot an SVG image object to a location relative to the user space (that is, the user's coordinate system. When a relatively static image is used to zoom in or zoom in, the SVG graphical object is usually not moved in the user's coordinate system. Instead, the user's coordinate system will) move in the SVG view area (with all the images attached to it ). Therefore, from the perspective of the inspection area, graphical objects have been moved. That is to say, you are generally a user coordinate system that moves or converts additional graphical objects, rather than the graphical objects themselves. Based on the preceding description, the four numbers ULCx, ULCy, UUwidth, and UUheight are interpreted as follows: ULCx and ULCy-will move the user's coordinate system (drawing graphical objects inside) in this way, the point (ULCx, ULCy) will appear in the upper left corner of the defined SVG view area. That is, the user coordinate system will be visualized in the view area, so that the user coordinate points (ULCx, ULCy) will occur in the upper left corner of the SVG view area. This will eventually change to moving the user coordinate system origin point relative to the view area along all the "appended" graphic objects. For example, <svg width = "300px" height = "200px" viewBox = "0 0 300 200"> in this example, the horizontal direction is 300 pixels per 300 users, in the vertical direction, the unit is 200 pixels per 200 users. In other words, each user unit is equal to one pixel. <Svg width = "300px" height = "200px" viewBox = "0 0 600 400"> however, in the following example, the horizontal direction has 600 pixels per 300 users (or each user unit has 0.5 pixels), while the vertical direction has 400 pixels per 200 users (or each user unit has 0.5 pixels ). Note that this change will reduce the size of all graphical objects by half. JS operation svg: 1. Get sub-elements: firstChild, firstElementChild. This is because the svg file may introduce <? Xml version = "1.0" encoding = "UTF-8"?> In this case, firstChild indicates these non-HTMLElement elements, including spaces and carriage returns. 2. Set attributes: setAttribute ('name', 'value'); 3. Set the value of the text label: textSvg. firstChild. data = '40', or use textContent, which has a wholeText attribute, but not available, or directly textSvg. textContent = '40'; Example 1: Create a circlegearCircleElement = document. createElementNS ("http://www.w3.org/2000/svg", "circle"); gearCircleElement. id = 'circle'; gearCircleElement. cx. baseVal. value = 34; gearCircleElement. cy. baseVal. value = 43; gearCircleElement. r. baseVal. value = 12; gearCircleElement. style. fill = '# f00'; Example 2: Create the text gearTextElement = document. createElementNS ("http://www.w3.org/2000/svg", "text"); gearTextElement. id = 'text'; gearTextElement. setAttribute ("x", 67); gearTextElement. setAttribute ("y", 34); gearTextElement. setAttribute ("transform", "translate (3,-3)"); // Offset the text from the center of the circle. gearTextElement. textContent = "##"; gearTextElement. setAttribute ("font-size", 10); Example 3: Create a straight line gearLineElement = document. createElementNS ("http://www.w3.org/2000/svg", "line"); gearLineElement. id = "line"; gearLineElement. x1.baseVal. value = 3; gearLineElement. y1.baseVal. value = 56; gearLineElement. x2.baseVal. value = 12; gearLineElement. y2.baseVal. value = 43; gearLineElement. style. stroke = "white"; lie