时间戳

首页 > 解决方案 > 需要帮助将动画添加到 SVG 图形

javascript - 需要帮助将动画添加到 SVG 图形

问题描述

我有以下用于 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，但线不旋转，只是线性移动。如何让线条旋转？任何帮助表示赞赏。

标签： javascripthtmlsvg

解决方案

推荐阅读