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... SyntaxHighligh 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 uuuwidth UUheight) ULCx and ULCy? The "x" in the upper left corner and "y" in the upper left corner of the e-generation table 」. What is the difference between UUwidth and UUheight? In general, the "user unit width" and "user unit height" of the e-generation table will plot SVG graphical objects in the user space? To the location relative to the user space (that is, the user coordinate system. Scaling and moving with relatively static images? In g view, SVG graphical objects are generally not moved in the user's coordinate system, but the user's coordinate system itself 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, uwidth, and UUheight are interpreted as follows: ULCx and ULCy-will move the user's Coordinate System? Face painting? The origin of a graphical object. In this way, the point (ULCx, ULCy) appears 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: In this example, the horizontal direction is 300 pixels per 300 users, while the vertical direction is 200 pixels per 200 users. In other words, each user unit is equal to one pixel. However, in the following example, the horizontal direction is 600 pixels per 300 user units (or each user unit is 0.5 pixels ), in the vertical direction, each 400 user units will have 200 pixels (or each user unit is 0.5 pixels ). Note that this change will reduce the size of all graphical objects by half. JS operation svg: 1. Obtain sub-elements: firstChild, firstElementChild, which may be introduced in the svg file. 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