Article Contributed By :. Easy Normal Medium Hard Expert. Writing code in comment? Please use ide. Load Comments. What's New. Most popular in HTML. How to update Node. How to position a div at the bottom of its container using CSS? We couldn't possibly display an infinite SVG canvas on a web page, so we need a way of defining what area of the canvas to display to our users.
This is where the SVG Viewport comes in, you can think of the Viewport as a window used to view a specific area of the canvas. The SVG Viewport is easier to understand with a few examples, so let's start with something simple.
Here we are defining an SVG element and setting it's Viewport width and height by applying the width and height attribute directly to the SVG. With a Viewport set to px by px we are essentially asking to view an area of the canvas with these dimensions. By default, our Viewport will sit at the top left of the canvas we will explore later how to move its position.
Now that we have defined our Viewport, we can start adding elements to our SVG canvas. Lets start by adding a simple rectangle element that has a width and height of px:. As you can see, although we are adding the rectangle to the canvas, we are viewing it via the Viewport.
Bear in mind that although the rectangle is only px in width and height, the entire SVG element will still take up a space of px by px within your webpage as that is the size of our viewport.
We can also move the rectangle to a different position on the canvas by applying an x and y value. You will notice that although we are moving the rectangle around the canvas, our viewport stays in the exact same place. Therefore, as long as we don't move the rectangle to a position outside of the viewport, it will remain visible. You may have already figured out that if we move the rectangle to a position on the canvas that is not visible by the viewport, it will simply go out of view.
The three rectangles on the left demonstrate the use of one of the absolute unit identifiers, the "in" unit inch. CSS defines 1 inch to be equal to 96 pixels.
Therefore, the topmost rectangle, which is specified in inches, is exactly the same size as the middle rectangle, which is specified in user units such that there are 96 user units for each corresponding inch in the topmost rectangle. The bottom rectangle of the group illustrates what happens when values specified in inches are scaled. The three rectangles in the middle demonstrate the use of one of the relative unit identifiers, the "em" unit.
The topmost rectangle, which is specified in "em" units, is exactly the same size as the middle rectangle, which is specified in user units such that there are user units for each corresponding "em" unit in the topmost rectangle. The bottom rectangle of the group illustrates what happens when values specified in "em" units are scaled. The three rectangles on the right demonstrate the use of percentages. The topmost rectangle, which is specified in percentage units, is exactly the same size as the middle rectangle, which is specified in equivalent user units.
The bottom rectangle of the group illustrates what happens when values specified in percentage units are scaled. The bounding box or "bbox" of an element is the tightest fitting rectangle aligned with the axes of that element's user coordinate system that entirely encloses it and its descendants.
Note that the values of the opacity , visibility , fill , fill-opacity , fill-rule , stroke-dasharray and stroke-dashoffset properties on an element have no effect on the bounding box of an element. For curved shapes, the bounding box must enclose all portions of the shape along the edge, not just end points. Note that control points for a curve which are not defined as lying along the line of the resulting curve e.
For example, control points of a curve that are at a further distance than the curve edge, from the non-enclosing side of the curve edge, must be excluded from the bounding box. On the left, a correct object bounding box of the path is shown. Note that it does not include the top-most control point of the curve, but it does include all of the blue shape, even the parts that lie outside of the convex hull of the control points. A call to getBBox on the element will return the same rectangle as if the element were rendered.
However, an element that is not in the rendering tree does not contribute to the bounding box of any ancestor element. The following example defines a number of elements. The expected object bounding box for each element with an ID is shown below. For text content elements , for the purposes of the bounding box calculation, each glyph must be treated as a separate graphics element.
The calculations must assume that all glyphs occupy the full glyph cell. The full glyph cell must have width equal to the horizontal advance and height equal to the EM box for horizontal text. For vertical text that is typeset sideways, the full glyph cell must have width equal to the EM box and height equal to the horizontal advance.
For other vertical text, the full glyph cell must have width equal to the EM box and height equal to the vertical advance, or height equal to the height of the EM box if no vertical advance is defined in the font. For example, for horizontal text, the calculations must assume that each glyph extends vertically to the full ascent and descent values for the font. Because declarative or scripted animation can change the shape, size, and position of an element, the bounding box is mutable.
Thus, the bounding box for an element shall reflect the current values for the element at the snapshot in time at which the bounding box is requested, whether through a script call or as part of a declarative or linking syntax.
Note that elements whose DOM object does not derive from SVGGraphicsElement such as gradient elements do not have a bounding box, and thus have no interface to request a bounding box. Elements in the rendering tree which reference unresolved resources shall still have a bounding box, defined by the position and dimensions specified in their attributes, or by the initial value for those attributes if no values are supplied.
The following algorithm defines how to compute a bounding box for a given element. The inputs to the algorithm are:. The algorithm to compute the bounding box is as follows, depending on the type of element :.
The values of the fill , fill-opacity and fill-rule properties do not affect fill-shape. The values of the stroke-opacity , stroke-dasharray and stroke-dashoffset do not affect the calculation of the stroke shape.
The fill , stroke and markers input arguments to this algorithm do not affect the bounding box returned for these elements. The object bounding box , stroke bounding box or decorated bounding box of an element is the result of invoking the bounding box computation algorithm above with the following arguments: element is the element itself; space is the element's user coordinate system; fill is true; stroke is true if we are computing the stroke bounding box or decorated bounding box , and false othwerise; markers is true if we are computing the decorated bounding box , and false otherwise; and clipped is false.
The following elements offer the option of expressing coordinate values and lengths as fractions and, in some cases, percentages of the object bounding box , by setting a specified attribute to 'objectBoundingBox' on the given element:. In the discussion that follows, the term applicable element is the element to which the given effect applies. For gradients and patterns, the applicable element is the graphics element which has its fill or stroke property referencing the given gradient or pattern.
For special rules concerning text elements , see the discussion of object bounding box units and text elements. For clipping paths, masks and filters, the applicable element can be either a container element or a graphics element. When keyword objectBoundingBox is used, then the effect is as if a supplemental transformation matrix were inserted into the list of nested transformation matrices to create a new user coordinate system.
First, the minx , miny and maxx , maxy coordinates are determined by the extends of the object bounding box of the applicable element. Then, coordinate 0,0 in the new user coordinate system is mapped to the minx,miny corner of the tight bounding box within the user coordinate system of the applicable element and coordinate 1,1 in the new user coordinate system is mapped to the maxx,maxy corner of the tight bounding box of the applicable element.
In most situations, the following transformation matrix produces the correct effect:. You can think of the viewport as the window to our image and the viewBox as the tool we use to scale and position the image.
The viewBox is a very useful tool to crop our images. The easiest way to crop the image is by using the min x and y coordinates. You can check out the code for the above here. Now to animate this is quite easy, all we need to do is change the min-x value of the viewBox.
This gives us the following:. You can check this out here. I have left preserveAspectRatio out of this article as it can be overwhelming while also getting to grips with the viewBox. When you feel comfortable with the basics of the viewBox then you should go on to advance your knowledge by learning about preserveAspectRatio , if you would like me to write about it then again let us know via Twitter.
I hope I have helped you understand the viewBox , now go ahead and make some cool stuff! Why viewBox?
0コメント