Question

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

Answer 1

您可以使用相同的定义。只需对每个<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>

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

1 个答案: