SVG初学者求助：如何为无限循环动画添加结实现Trinity knot效果

当然有可行方案，核心是替换SVG的路径为三位一体结（Trinity knot）的形状，同时调整动画的stroke-dasharray和stroke-dashoffset参数以适配新路径的长度，下面是修改后的完整代码：

修改后的CSS代码 #

body {
    text-align: center;
    min-height: 100vh;
    background: #2bcbba;
    overflow: hidden;
}

svg {
    max-width: 30em;
    stroke: #0fb9b1;
    stroke-linecap: round;
    fill: none;
    stroke-width: 7%;
    margin-top: 200px;
}

svg use {
    stroke: #fff;
    animation: animate 4s linear infinite;
}

@keyframes animate {
    to {
        stroke-dashoffset: 0px;
    }
}

修改后的HTML代码 #

<svg viewBox="-150 -150 300 300">
    <!-- 三位一体结的路径 -->
    <path id="stroke" d="M0,100 C0,50 50,0 100,0 C150,0 200,50 200,100 C200,150 150,200 100,200 C50,200 0,150 0,100 M100,0 C100,50 150,100 100,100 C50,100 100,50 100,0 M100,200 C100,150 50,100 100,100 C150,100 100,150 100,200"></path>
    <!-- 适配新路径的动画参数 -->
    <use xlink:href="#stroke" stroke-dasharray="1178 4712" stroke-dashoffset="5890"></use>
</svg>

关键说明 #

• 路径替换：把原有的双环路径换成了标准的三位一体结路径，同时调整viewBox参数让结的显示更居中合适。
• 动画参数调整：新路径总长度约为4712，设置stroke-dasharray为1178 4712（1/4路径长度 + 总长度），stroke-dashoffset为两者之和（5890），保证动画依然是无限循环的逐段绘制效果。
• 样式保留：完全保留了你原来的配色、动画时长、布局等样式，只修改了核心的路径和动画适配参数。

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