三位一体结 svg

Trinity knot svg

提问人：Abnet Hussien 提问时间：11/14/2023 最后编辑：enxanetaAbnet Hussien 更新时间：11/16/2023 访问量：38

问：

我现在想做一个三位一体结无限动画循环，我被无限循环动画困住了，我只想在上面添加一个结，这样标志看起来像一个三位一体结。我是SVG的初学者。有什么解决办法吗？

 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;
            }
        }
        <svg viewBox="-2000 -1000 4000 2000">
            <path id="stroke" d="M354-354A500 500 0 1 1 354 354L-354-354A500 500 0 1 0-354 354z"></path>
            <use xlink:href="#stroke" stroke-dasharray="1570 5143" stroke-dashoffset="6713px"></use>
        </svg>

HTML CSS SVG 动画

评论

答：

0赞 Darigan 11/14/2023 #1

可能是一个更好的方法，但你可以添加另一个看起来像三位一体结的元素：use

<use xlink:href="#stroke" y="-800" stroke-dasharray="1570 5143" stroke-dashoffset="6713px"></use>

另外，我设置了 Y 位置来测试它，它最好自己调整。

评论

0赞 Abnet Hussien 11/14/2023
它只是在上面添加了另一个无穷大循环
0赞 Darigan 11/16/2023
对不起，伙计，但听起来上面的家伙做到了！
2赞 chrwahl 11/16/2023 #2

你需要画一条有三个角的路径。在这里，我有三个弧线形成中间的线。可以是其他方法可以或多或少地做同样的事情。

我给路径一个长度（），以便更容易计算笔画破折号数组等。pathLengt

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

svg {
  max-height: 95vh;
  stroke: #0fb9b1;
  stroke-linecap: round;
  fill: none;
  stroke-width: 40px;
}

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

@keyframes animate {
  from {
    stroke-dashoffset: 100px;
  }
  to {
    stroke-dashoffset: 0px;
  }
}
<svg viewBox="0 0 910 820">
  <path transform="translate(22 24)" pathLength="100"
  d="M 433 0 A 440 440 90 0 0 866 750
  A 440 440 90 0 0 0 750 A 440 440 90 0 0 433 0 Z"
  stroke-dasharray="40 60" stroke-dashoffset="100"/>
</svg>

上一个：当用户滚动时，如何使此表具有粘性？

下一个：图标是“透明”引导程序