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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.