我有以下 SVG 图形代码:
<script>
</script>
<body>
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
<rect x = '0', y = '0', height = '200' width = '200' color = 'yellow' fill = 'yellow'></rect>
<line x1 = '0', y1 = '0', x2 = '200', y2 = '200', style = 'stroke:black; stroke-width:1'>
<animateMotion begin='0s' dur='5s' values='0,0; 40,0' repeatCount='indefinite'></animateMotion>
</line>
<line x1 = '200', y1 = '0', x2 = '0', y2 = '200', style = 'stroke:black; stroke-width:1'></line>
<line x1 = '0', y1 = '40', x2 = '200', y2 = '160', style = 'stroke:black; stroke-width:1'></line>
<line x1 = '0', y1 = '160', x2 = '200', y2 = '40', style = 'stroke:black; stroke-width:1'></line>
<line x1 = '0', y1 = '120', x2 = '200', y2 = '80', style = 'stroke:black; stroke-width:1'></line>
<line x1 = '0', y1 = '80', x2 = '200', y2 = '120', style = 'stroke:black; stroke-width:1'></line>
<line x1 = '0', y1 = '80', x2 = '200', y2 = '120', style = 'stroke:black; stroke-width:1'></line>
<line x1 = '40', y1 = '0', x2 = '160', y2 = '200', style = 'stroke:black; stroke-width:1'></line>
<line x1 = '80', y1 = '0', x2 = '120', y2 = '200', style = 'stroke:black; stroke-width:1'></line>
<line x1 = '120', y1 = '0', x2 = '80', y2 = '200', style = 'stroke:black; stroke-width:1'></line>
<line x1 = '160', y1 = '0', x2 = '40', y2 = '200', style = 'stroke:black; stroke-width:1'></line>
</svg>
</body>
</html>
我要做的是让每一行顺时针旋转到下一行的位置。我尝试使用 animateMotion,但线不旋转,只是线性移动。我怎样才能使线条旋转?任何帮助表示赞赏。