Thursday, March 15, 2012

HTML5 svg, group with transform

Example:
HTML5 svg, group with transform
<!doctype html>

<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 svg</title>

</head>
<body>
<h1>Mobile-Web-App: HTML5 Scalable Vector Graphics (svg)</h1>

<svg width="400" height="300">
 <rect x="0" y="0" width="400" height="300" stroke="black" stroke-width="1" fill="white" />

 <g id="svggroup" transform="translate(100, 100) rotate(-10) scale(1.5)">
  <rect x="0" y="0" width="100" height="100" stroke="red" stroke-width="5" fill="none"/>
  <circle cx="50" cy="50" r="50" stroke="blue" stroke-width="5" fill="none"/>
 </g>
</svg>

</body>
</html>

No comments:

Post a Comment