Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

SVG Code to Translate a Rectangle and Text

<svg width="200" height="180" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <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.

More Graphics Design Tips:
• Inkscape Basic Fill
• Inkscape - How to Add a New Node
• How to Create a Product Box in Photoshop
• SVG Basic Shapes Tutorials
• SVG Example Code to Rotate Elements
• How to Make a Video Game for your Xbox for Free
• Create GIF Animations With Free GIMP Image Editing Program
• Inkscape Grouping
• Inscape Text in a Shape
• Stop Motion Animation: Nine Creative and Easy Techniques

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268