Skip to content

Instantly share code, notes, and snippets.

@chilijung

chilijung/README.md

Last active August 29, 2015 14:00
Show Gist options
  • Save chilijung/11053775 to your computer and use it in GitHub Desktop.
Save chilijung/11053775 to your computer and use it in GitHub Desktop.
Download ZIP
svg <g> tag
Raw
README.md
Raw
index.html
<html>
<head>
</head>
<body>
<svg>
<svg>
<g>
<line x="10" y="10" x1="60" y1="10" style="stroke: #006"/>
<rect x="10" y="20" width="30" height="40" style="stroke: red; fill:#CCC"/>
<text x="10" y="80" style="stroke: red; fill:#CCC">Testing SVG</text>
</g>
<!-- rotated 180 degrees around the point 200,50. -->
<g transform="rotate(180, 200, 50)">
<line x="10" y="10" x1="60" y1="10" style="stroke: #006"/>
<rect x="10" y="20" width="30" height="40" style="stroke: red; fill:#CCC"/>
<text x="10" y="80" style="stroke: red; fill:#CCC">Testing SVG</text>
</g>
</svg>
<!-- g tag is not working with x, y, you will have to set to svg tag -->
<svg y="100">
<!-- element in side g tag will inherient the styles -->
<g style="stroke: red; fill:#CCC" y="100">
<line x="10" y="10" x1="60" y1="10"/>
<rect x="10" y="20" width="30" height="40"/>
<text x="10" y="80">Testing SVG</text>
</g>
</svg>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment