Menu
SVG Code to Create a Rectangle and Text and Translate as a Group

Hello!
<svg width="200" height="180" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(50 50)">
   <rect x="0" y="0" width="110" height="70" stroke="#000" fill="#4cff00"></rect>
   <text x="5" y="50" font-family="Verdana" font-size="35">
       Hello!
   </text>
</g>
</svg>

This example shows how to create a rectangle and the text "Hello!". The rectangle is positioned at coordinates x=0 y=0, the upper-right corner of the svg element. The text is positioned at coordinates x=5 y=50. Both elements are contained within a group. To the group tag we add a transform. The transform is translate(50 50). The syntax of the translate transform is shown below.

transform="translate(x y)"

The translate transform takes two parameters, the x value and y value. These value are the amount to move the element along the x axis and the y axis. In the next example, how to group the rectangle and the text elements, and then translate the group, which gives the same result.


Learn more at amazon.com

More Graphics Design Tips:
• Inkscape Document Properties
• Inscape Text in a Shape
• Example Code for X3Dom Basic Primitive Shapes: Box, Sphere, Cylinder, Cone, and Torus
• Animation Software - The Amazing 3D World
• Tips and Tricks for Getting Free Images
• Use GIMP to Scale (Resize) an Image
• HTML5 Canvas
• How to Make a Meme
• XDdom 3D Axis and Coordinate System
• SVG Code for Outlined Letters Text