求助：如何实现全屏无限旋转的SVG放射线条效果？

你遇到的核心问题是SVG线条长度不足，加上固定的viewBox限制，导致旋转时无法覆盖整个屏幕。下面给你两种可行的方案，都能实现你要的效果：

方案一：优化SVG实现 #

这个方案基于你现有的思路，调整SVG线条长度和容器设置，让线条旋转时铺满全屏：

步骤说明 #

• 把SVG的线条延长到超出屏幕范围（比如从视口外很远的点到对面视口外的点），确保旋转时任何角度都能覆盖整个屏幕
• 用全屏的overflow:hidden容器包裹旋转的SVG，裁剪超出部分
• 中心圆形固定定位，不参与旋转

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100vh;
        }
        .rotation-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            animation: rotating 10s linear infinite;
        }
        .center-circle {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: red;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        @keyframes rotating {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="rotation-wrapper">
        <svg width="100%" height="100%" viewBox="-1000 -1000 3000 3000" xmlns="http://www.w3.org/2000/svg">
            <style>
                .st0 { fill: none; stroke: red; stroke-width: 1; stroke-miterlimit: 10; }
            </style>
            <!-- 绘制足够长的放射线条，间隔10度 -->
            <line class="st0" x1="0" y1="-1500" x2="0" y2="1500"/>
            <line class="st0" x1="1500" y1="0" x2="-1500" y2="0"/>
            <line class="st0" x1="1060" y1="-1060" x2="-1060" y2="1060"/>
            <line class="st0" x1="1060" y1="1060" x2="-1060" y2="-1060"/>
            <line class="st0" x1="1500" y1="-866" x2="-1500" y2="866"/>
            <line class="st0" x1="866" y1="-1500" x2="-866" y2="1500"/>
            <line class="st0" x1="1500" y1="866" x2="-1500" y2="-866"/>
            <line class="st0" x1="866" y1="1500" x2="-866" y2="-1500"/>
            <!-- 可以继续添加更多线条，间隔10度即可 -->
            <line class="st0" x1="1414" y1="-586" x2="-1414" y2="586"/>
            <line class="st0" x1="586" y1="-1414" x2="-586" y2="1414"/>
            <line class="st0" x1="1414" y1="586" x2="-1414" y2="-586"/>
            <line class="st0" x1="586" y1="1414" x2="-586" y2="-1414"/>
        </svg>
    </div>
    <div class="center-circle">Support</div>
</body>
</html>

关键调整点 #

• SVG的viewBox设置为-1000 -1000 3000 3000，给线条留出足够的延伸空间
• 每条线条都从-1500到1500级别的坐标，确保超出任何屏幕尺寸
• 旋转容器设置为全屏，overflow:hidden裁剪多余部分

方案二：纯CSS实现（更简洁） #

如果不想用SVG，也可以用CSS锥形渐变结合遮罩实现，代码更简洁：

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
        }
        .rotation-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: conic-gradient(from 0deg, transparent 0deg 9deg, red 9deg 10deg, transparent 10deg 360deg);
            animation: rotating 10s linear infinite;
        }
        .center-circle {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: red;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            z-index: 1;
        }
        @keyframes rotating {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="rotation-wrapper"></div>
    <div class="center-circle">Support</div>
</body>
</html>

说明 #

• 用conic-gradient绘制间隔10度的红色线条，其余透明
• 旋转容器即可实现放射线条旋转的效果，无需额外元素
• 兼容性：现代浏览器都支持conic-gradient，若需兼容旧版浏览器，优先用SVG方案

额外资源提示 #

• 如果你想更灵活控制线条样式（比如粗细、渐变），可以研究SVG的<line>元素结合<animateTransform>直接在SVG内实现旋转（不过CSS动画更简单）
• 关于CSS动画性能：用transform: rotate()实现旋转是硬件加速的，性能比修改其他属性更好，你的原动画写法已经很合理，保持即可

内容的提问来源于stack exchange，提问作者master Nixe