Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to write SVG layout canvas and coordinate system and window". In daily operation, I believe many people have doubts about how to write SVG layout canvas and coordinate system and window. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubt of "how to write SVG layout canvas and coordinate system and window". Next, please follow the editor to study!

SVG coordinate system

Although the representations of SVG and CSS box models are different, their coordinate systems work in the same way.

All SVG coordinate systems start at the upper-left corner of the parent element, which can be a body element, div element, or other container.

When you create a new SVG element, you also create a new coordinate system, the infinite SVG canvas. The start point may be aligned with the upper-left corner of the parent element, but the canvas extends infinitely in all directions. The positive direction of the x-axis is to the right and the positive direction of the y-axis is downward. The negative directions of the two axes also extend to the left and up.

One thing to understand about SVG is the simultaneous use of multiple coordinate systems. Every time you create a new SVG element, you create a new canvas in its coordinate space, as well as a window.

The coordinate system of each pair of canvases and windows is aligned by default. They look as if they are in the same system, but they are not. As we'll see next, you can change the way they align with each other.

In practice, the elements you create on an infinite canvas are placed near the origin of the canvas, but in theory, they can be placed anywhere. You can create a circle and place it 4 billion pixels to the right of the origin, and no one stops you from doing so.

In theory, the window can also be close to infinity, and you can set any size you want. However, only if you have fixed the size of the window can it be fixed, and once you set the size, the coordinate system will maintain this size in space.

The user agent (that is, the browser) will by default align the origin and axis of the two coordinate systems, but you can change the alignment according to your needs.

The two systems can be set to different units. You can set one to pixels and the other to millimeters, picas, inches, dots, ems, or any other unit you want. Percentage% is the exception, it cannot be used here.

Remember again that one of these two coordinate systems acts on an infinite canvas and the other on a fixed window.

SVG window

Every time you create a new SVG element, you also create a new SVG window. The size of the window is equal to the width and height you set for the SVG element.

CSS Code copies content to the clipboard

Here, I created a window that is 600px wide and 300px high. I created a red rectangle of 200x100px in the window. Because I do not specify a unit, pixels are used by default. Because this is the same as my usual setting, I prefer not to specify a unit, which is faster.

To be able to see the boundaries of the window, I also added an outline to the element. This is the result of code generation.

You can see a thick brown border of 5px surrounding an area with a width of 600px and a height of 300px. The content in the border is the window.

A red rectangle with a width of 200px and a height of 100px is separated from the window. By default, the upper-left corner of the rectangle is placed at the origin of the SVG canvas, aligned with the origin of the window.

My question is, if you don't set the width and height for the window, what should its size be? I didn't find a definite answer. This is determined by each user agent (browser), but it seems that the default is 300px and 150px. However, I do not recommend that the window is displayed according to the default size, it is best to set the size according to your own needs.

Move the SVG element on the canvas

You can change the position of the rectangle on the SVG canvas by setting its x and y values. Here I set both the x and y values to 10px, and you can see that the rectangle is away from the upper left corner of the window.

XML/HTML Code copies content to the clipboard

Here you can see that most of the rectangle has become invisible, and only a small part of it can still be seen in the window. In fact, I just moved it a few pixels, so in theory you can draw a rectangle anywhere you like on this infinite canvas.

See what's outside the window.

One thing I don't often mention is why we can't see outside the window. Because the SVG element has an overflow attribute with a default value of hidden, anything that goes beyond the window is hidden.

Of course, the overflow property can also be set to other values, such as visible.

XML/HTML Code copies content to the clipboard

Change the value of the overflow property to visible, and you can see the parts of the SVG canvas that are beyond the window, including the parts of the canvas that can appear on your screen (another window created by your browser).

Now you can see the entire red rectangle, including the part beyond the boundary of the window. You don't usually do this when working with SVG, but now it's just a way to help you understand what's going on.

Create a new window

As I said earlier, SVG has multiple coordinate systems that work at the same time. In the simplest case, there is also a coordinate system for the canvas and a coordinate system for windows. I also mentioned that you can create new canvases and create new windows.

Every time you create a new SVG element, even if it is nested within another SVG element, you will create a new canvas and window with its own coordinate system. Only a few elements create new canvases and windows:

element

The element when the element is instantiated.

Introduced into the SVG file

element

element

Because we haven't started talking about these elements (except for the SVG element), I'm just listing them now. I now mainly want to emphasize the creation of multiple SVG canvases and windows in the same HTML file.

At this point, the study on "how to write SVG layout canvas and coordinate systems and windows" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.