Template based code generation - Part 3 : SVG transformations

Series index

Next parts of this article assume that the tdCodeFactory module is installed and opérational.

In the Github repository , the source code for this example is available in the Demo/3.ShapeFactory and Demo/CsCode folders.

SVG transformations

Our third example is about how to apply transforms to rectangles.

An alternative would be to use CSS transforms, but they are not supported on SVG elements by IE.

SVG transformations are defined using the transform attribute on XML elements that support them.

If several objects use the same factors of transformation, their transform attribute becomes redundant, and the code becomes less maintainable.

The only way to make reusable definitions of transformation is to use the DTD entities.

Our generator thus produces SVG code that exploits this technique to define potentially reusable transformations:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
  <!ENTITY transformData1 'matrix(0.5, 0, 0, 0.5, 0, 0)'>
  <!ENTITY transformData2 'matrix(0.7, 0, 0, 0.7, 15, 15)'>
  <!ENTITY transformData3 'matrix(1, 0, 0, 1, 15, 30)'>
]>
<svg xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 200 150">
...
  <rect 
    class='rectStyle1' 
    x='10'
    y='10'
    width='80'
    height='40'
    rx='4'
    ry='4'
    transform='&transformData1;' />
...
</svg>

An introduction to matrix transformations is available here