Мне нужно нарисовать восьмиугольник с надписью СТОП.Так что в основном это знак остановки.Затем, рядом с ним, мне нужно нарисовать то же самое, но повернуть на 90 градусов.Затем рядом с ним та же самая вещь повернулась на 180 градусов.Затем, ниже этих трех, нарисуйте еще один знак остановки, который вращается.Когда я рисую первую фигуру, я не вижу никаких проблем.Но когда я обертываю его в теги, чтобы нарисовать остальные фигуры, первая фигура исчезает, как при не визуализации.Что я здесь не так делаю?Я новичок в HTML5 ...
<!DOCTYPE html>
<html lang="en">
<head>
<title>SVG Sample</title>
<meta charset="utf-8">
<link rel="stylesheet" href="html5_1.css">
</head>
<body>
<svg width="500" height="300">
<defs>
<g id="myGroup">
<polygon points="50,5 100,5 125,30 125,80 100,105
50,105 25,80 25, 30"
style="stroke:#660000; fill:#cc3333; stroke-width:3;">
</polygon>
<text x=38 y=65 font-family="san-serif" font-
size="32px" fill="white">STOP</text>
</g>
</defs>
<use x="5" y="5" xlink:href="#myGroup" />
<use x="5" y="5" xlink:href="#myGroup" transform="translate(110,0)"/>
<use x="5" y="5" xlink:href="#myGroup" transform="translate(220,0)"/>
</svg>
</body>
</html>