This is the code for Chapter 1, Figure 20 from D3.js in Action that demonstrates how SVG transform works. The elements on page are translated (position has changed) and scaled (size has changed). This transformation is applied to a g element, which is a logical grouping and has not visual representation, but the transformation applies to all child elements--in this case text and circles.
Note that D3 (or any other JavaScript) are not used in this example.
| <html> | |
| <head> | |
| <title>D3 in Action Chapter 1 - Example 3</title> | |
| <meta charset="utf-8" /> | |
| </head> | |
| <style> | |
| svg { | |
| position: absolute; | |
| width: 500px; | |
| height: 500px; | |
| border: 1px lightgray solid; | |
| } | |
| </style> | |
| <body> | |
| <div id="vizcontainer"> | |
| <svg> | |
| <g> | |
| <circle r="5"/> | |
| <text>A Label</text> | |
| </g> | |
| <g transform="translate(100,50)"> | |
| <circle r="5" /> | |
| <text>A Label</text> | |
| </g> | |
| <g transform="translate(100,400)scale(3.5)"> | |
| <circle r="5"/> | |
| <text>A Label</text> | |
| </g> | |
| </svg> | |
| </div> | |
| </body> | |
| <footer> | |
| <script> | |
| </script> | |
| </footer> | |
| </html> |
