Skip to content

Instantly share code, notes, and snippets.

@jimblandy

jimblandy/transforms.html

Created February 12, 2020 22:40
Show Gist options
  • Save jimblandy/77cb1826730eda6a72b6b5b21c810b45 to your computer and use it in GitHub Desktop.
Save jimblandy/77cb1826730eda6a72b6b5b21c810b45 to your computer and use it in GitHub Desktop.
Download ZIP
playing with SVG transforms
Raw
transforms.html
<html>
<head></head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
<rect x="50" y="50" width="100" height="220" fill="none" stroke="black"/>
<rect x="30" y="20" width="60" height="190" fill="none" stroke="gray"/>
<g id="outer">
<g id="inner" transform="rotate(10) translate(200,0)">
<rect id="red" x="50" y="50" height="100" width="100" fill="red"/>
<rect id="blue" x="50" y="170" height="100" width="100" fill="blue"/>
</g>
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment