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

问题描述 投票：0回答：1

我需要在其中绘制一个带有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>
html5 svg
1个回答
0
投票

您可以使用相同的定义。只需对每个<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.