Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

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 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.

More Graphics Design Tips:
• How to Use Basic Linear Gradients in Inkscape
• Inkscape - Free Vector Graphics Illustration Package
• Inkscape Shadows and Highlights
• Inkscape Circles, Ellipses, and Arcs Drawing Tutorial
• Inkscape Grouping
• How to Trace an Image Using Photoshop
• What is Blender? The Software's Origins and Evolution
• Inkscape Text Kerning
• Graphics Design for Beginners - Blur Filters
• How to Remove PNG and JPEG EXIF Metadata

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-2020 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268