Home:: GUI:: Utilities

  1. Introduction
  2. Reference
    1. Methods
      1. constructor
      2. init
      3. getTM
    2. Properties
      1. x
      2. y
      3. width
      4. height
      5. align
      6. meetOrSlice
      7. PAR
  3. Example
  4. Download

Introduction

ViewBox is a JavaScript object that has been created to assist in the manipulation of the SVG's viewBox attribute.

Special thanks to Jim Ley and Dave Pawson for helping to iron out problems in the code.


Reference

Methods

constructor - new ViewBox(svgNode);

init(svgNode);

getTM() : SVGMatrix;

Properties


Example

It is best to view this example in a page by itself: viewBox.svg

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.


Download

ViewBox.js