SVG Code to Translate a Rectangle and Text

<svg width="200" height="180" version="1.1" xmlns="">
   <rect x="0" y="0" width="110" height="70" stroke="#000" fill="#4cff00" transform="translate(50 50)"></rect>
   <text x="5" y="50" font-family="Verdana" font-size="35" transform="translate(50 50)">

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. To each element 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

More Graphics Design Tips:
• Krita Paint plus Vector Drawing Portable Application
• MathML File Structure
• Inkscape - How to Delete a Node
• Graphics Design for Beginners - Cropping Images
• Inkscape: Combine the Paths of Multiple Shapes
• Where To Find Free Stock Photography, Clip Art, And Other Graphics For Your Web Site
• How to Place Greek Letters in an Inkscape Drawing
• SVG Image Clipping
• What is the Pantone Color System?
• Create Animated Glistening Gold Text With SVG