我需要画一个八边形，里面有一个 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>
您可以使用相同的定义。只需对每个<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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句