[Interactive SVG component] isometric projection

Http://www.petercollingridge.co.uk/interactive-svg-components/isometric-projection

 

Isometeric projections are commonly used in technical drawings and used to be used in some computer game graphics. in an isometeric projection the three axes appear 120 ° from each other and are equally foreshortened. it can be achieved by rotating an object
45 ° in the plane of the screen and ~ 35.3 ° through the horizontal axis (see
Wikipedia for more information ).

We start with an image, such as this floor plan.

If we rotate this image 45 ° now, it will move almost off screen as rotations are always centred on the point (0, 0 ).

Translation

So we first translate our image so the point around und which we want to rotate it (probably the center of the image) is now at the point (0, 0 ). for example, the center of this image is at (150, 80), so we translate the room by wrappping it in a group Ike so:

View Source

Print?

1	<g transform="translate(-150, -80)">

2	room shapes...

3

</g>

Rotation in the plane of the screen

We can now rotate our image. A rotation of 45 ° in the plane of the screen is easy enough
transform="rotate(45)", But a rotation through the horizontal axis is more tricky. the solution is to use matrices. A rotation in the plane of the screen is a rotation through the z-axis and given by the following 3x3 matrix:

Because SVGs are 2D, they don't bother with the final row of this matrix (although it is important for intermediate steps as we'll see ). SVG matrices are given as a single line of parameters in the order (column 1, Row 1), (column 1, Row 2), (column 2, row
1) and so on. Therefore we can replacetransform="rotate(45)"With:

View Source

Print?

1	transform="matrix(0.707 0.707 -0.707 0.707 0 0)"

Rotation through the horizontal axis

Rotating something through the horizontal (or X-) axis means processing tively tilting the image away from us. Such a rotation is given by the following 3x3 matrix:

In an isometric projection, the angle the camera moves is ~ 35.3 °, however, this assumes that what we're looking at is lying on the floor (I. e. the xz-plane ). our image is "upright", in the XY-plane, so we actually need to rotate by 90 °-35.3 °. theta is therefore
54.7 °.

If we now multiply RZ (45°) by rx (54.7 °) We get:

Or in SVG terms:

View Source

Print?

1	transform="matrix(0.707 0.409 -0.707 0.409 0 -0.816)"

We can now add this to a group that contains the group with the translate transformation.

Translation back to the center

Finally, we need to move our image back to the center of the screen. we can do this a few ways. we cocould leave the image where it is and change the viewbox to be centred on (0, 0 ):

viewBox="-150, -80, 300, 160"

Alternatively, we cocould just add another group with a translation back:

View Source

Print?

1	<g transform="translate(150, 80)">

You may find that you have to tweak the translation a bit to ensure the corners stay within the bounds of the image.

Finally, if you're feeling very adventurous or want to minimize the size of the SVG and processing require to display it, you can combine the two translation matrices with the rotation matrix. the first translation matrix, T1,
Is given:

The second translation matrix, T2, wocould be the same, but with positive 150 and 80. If we multiply T2 x RISO x T1
We get:

View Source

Print?

1	<g transform="matrix(0.707 0.409 -0.707 0.409 100.51 -14.78)">

Note that this transformation will only work well if you want to rotate about the point (150, 80). As you can see from the file sizes below, we 've saved ourselves 94 bytes.

Attachment	Size
Room_plan.svg	637 bytes
Room_plan_translation.svg	675 bytes
Room_plan_rotate_without_translate.svg	666 bytes
Room_plan_isometric.svg	794 bytes
Room_plan_isometric_matrix.svg	700 bytes