当我将它们包装在组标签中时，SVG元素不可见

我需要绘制一个带有停止文本的八角形。因此，基本上这是一个停车标志。然后，在旁边，我需要画相同的东西，但旋转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>

您可以使用相同的定义。只需将不同的转换应用于每个<use>元素即可。

<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;"/>
      <text x=38 y=65 font-family="san-serif" font-size="32px" fill="white">STOP</text>
    </g>
  </defs>
  <use xlink:href="#myGroup" />
  <use xlink:href="#myGroup" transform="translate(110,0) rotate(90, 75,55)"/>
  <use xlink:href="#myGroup" transform="translate(220,0) rotate(180, 75,55)"/>
</svg>

相关内容

最新更新

热门标签：