SVG旋转半周期消失问题求助及PNG居中旋转实现咨询

一、SVG旋转时消失的原因及解决办法 #

原因 #

你给SVG里的<rect>添加了旋转动画，但这个矩形的尺寸和SVG的viewBox完全一致（110x101）。当矩形旋转时，它的对角线长度会远大于SVG的宽高（比如110x101的矩形对角线约149px），旋转到特定角度时，矩形的部分区域会超出SVG的视口范围，被自动裁剪，看起来就像“消失了半个周期”。

解决办法（选一种即可） #

1. 扩大SVG的视口范围
   修改SVG的viewBox属性，给旋转后的矩形留出足够空间，比如把原来的viewBox="0 0 110 101"改成viewBox="-50 -50 210 201"，这样上下左右都额外留出50px的空间，旋转时矩形就不会被裁剪了。

2. 让SVG允许内容溢出
   给SVG标签添加overflow="visible"属性，这样超出SVG视口的部分也能显示出来，不会被裁剪。

3. 给整个SVG加旋转动画
   把动画从<rect>移到整个SVG上，这样是整个SVG容器旋转，里面的内容不会被自己的视口裁剪。修改CSS：

   /* 删掉原来#fenster-logo-3_1的动画，替换成下面的 */
   svg {
       animation: spin 2s linear infinite;
   }
   

二、PNG图片居中旋转的简单实现 #

直接用<img>标签，配合CSS实现居中+旋转，代码简洁直观：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PNG旋转加载屏</title>
    <style>
        /* 全局重置，避免默认边距影响 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 让body占满屏幕，作为居中容器 */
        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            /* 可选：添加背景色区分加载屏 */
            background-color: #f5f5f5;
        }
        /* 旋转动画 */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        /* 给图片绑定动画 */
        .loading-img {
            width: 100px; /* 按需调整尺寸 */
            animation: spin 2s linear infinite;
        }
    </style>
</head>
<body>
    <img class="loading-img" src="你的PNG图片路径" alt="加载中">
</body>
</html>

说明 #

• 用flex布局实现屏幕居中，比绝对定位+transform写法更简洁。
• 动画用from/to替代百分比写法，效果完全一致，代码更清爽。
• 可根据需求调整图片尺寸、动画旋转速度。

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