We can define groups of svg elements using <defs>. Then re-use the defined groups using <use>.
<!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" />
<defs>
<g id="svggroup">
<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>
</defs>
<use xlink:href="#svggroup"/>
<use xlink:href="#svggroup" transform="translate(100, 100) rotate(-10) scale(1.5)"/>
</svg>
</body>
</html>
No comments:
Post a Comment