Reference

Methods

constructor - new ViewBox(svgNode);

This method creates a new ViewBox object. All initialization is handled by the init() method. All parameters for this method are described below

init(svgNode);

init() initializes the ViewBox object. This method extracts the x, y, width, and height values from the specified SVG node's viewBox attribute. The viewBox alignment and meetOrSlice parameters are extracted from the SVG node's preserveAspectRatio property. If these attributes do not exist, then x and y default to 0, width and height default to the containing window's width and height, alignment defaults to "xMidYMid", and meetOrSlice defaults to "meet".

getTM() : SVGMatrix;

getTM() returns an SVG Matrix. Post-multiplying an SVGPoint of the current mouse coordinate by the resulting matrix transforms the mouse coordinate to the viewBox coordinate system.

Properties

x is a number that corresponds to the x value in the associated SVG Node's viewBox attribute.

y is a number that corresponds to the y value in the associated SVG Node's viewBox attribute.

width is a number that corresponds to the width value in the associated SVG Node's viewBox attribute.

height is a number that corresponds to the height value in the associated SVG Node's viewBox attribute.

align is a string that corresponds to the align value in the associated SVG Node's preserveAspectRatio attribute.

meetOrSlice is a string that corresponds to the meetOrSlice value in the associated SVG Node's preserveAspectRatio attribute.

PAR is "virtual variable". Set this variable to a value that is appropriate for the preserveAspectRatio attribute, and the value will be parsed, setting the object properties as appropriate.

Example

The grid at the center of the grid allows you to change the alignment of the preserveAspectRatio attribute. Clicking none will cause the image to anamorphically scale to fit the window. The meet and slice buttons allow you to set the meetOrSlice property of the preserveAspectRatio attribute.

In this example, a circle will track the mouse as long as the cursor is over the blue rectangle. The mouse coordinate is transformed to the viewBox coordinate system and is displayed in the rectangle where the mouse is. The smaller rectangle shows a method of converting the viewBox coordinate back to the local coordinates of a transformed SVG element.