Skip to content

Instantly share code, notes, and snippets.

@dustinlarimer

dustinlarimer/README.md

Last active December 20, 2015 01:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dustinlarimer/6050773 to your computer and use it in GitHub Desktop.
Save dustinlarimer/6050773 to your computer and use it in GitHub Desktop.
Download ZIP
SVG transform
Raw
README.md

Simple demo of using SVG transform with path 'd' attribute to create radial axes.

Apply transform attributes to a group (<g>) to modify all nested elements:

  • translate(x,y)
  • rotate(degree)

More here

Raw
index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<body>
<div id="stage">
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="500">
<g transform="translate(300,300) rotate(-60)">
<path d="M -40,0 L 250,0" stroke="#000"></path>
<circle cx="-40" cy="0" r="10"></circle>
<circle cx="0" cy="0" r="10"></circle>
<circle cx="250" cy="0" r="10"></circle>
</g>
<g transform="translate(500,300) rotate(10)">
<path d="M -100,0 L 100,0" stroke="#000"></path>
<circle cx="-100" cy="0" r="10"></circle>
<circle cx="0" cy="0" r="10"></circle>
<circle cx="100" cy="0" r="10"></circle>
</g>
<g transform="translate(200,200) rotate(60)">
<path d="M -50,0 L 50,0" stroke="#000"></path>
<circle cx="-50" cy="0" r="10"></circle>
<circle cx="0" cy="0" r="10"></circle>
<circle cx="50" cy="0" r="10"></circle>
</g>
<g transform="translate(550,150) rotate(-20)">
<path d="M -100,0 L 100,0" stroke="#000"></path>
<circle cx="-100" cy="0" r="10"></circle>
<circle cx="0" cy="0" r="10"></circle>
<circle cx="100" cy="0" r="10"></circle>
</g>
</svg>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment