Tutorials

KodeKite Tools

HTML
Flexbox
SVG
Canvas
More


SVG Translation
SVG Translation

SVG translation is used to translate the shape form one position to another position by using translate() function, here translate means movement or shape from one position to other.

Syntax

transform="translate(x,y)"


You can apply translate to any shape or object to move from one point to other.


Example

Sorry, your browser does not support SVG element.

You can use SVG tranlation any where within an HTML document.


Practice Task

Open notepad or any other text editor, follow the following points.


  • Use <svg> element to draw svg any shape on webpage
  • Give width and height of 300 300 respectivelly to SVG element
  • Translate shape from one point to other

save file with name task.html or task.htm and then open it using any browser and see results.


Solution

Sorry, your browser does not support SVG element.

SVG Code Generators

Try our SVG generators to practice and generate SVG code in real time.