如何设置 SVG 路径的起点答案

【问题标题】：How to set starting point for SVG path如何设置 SVG 路径的起点
【发布时间】：2020-06-27 23:32:40
【问题描述】：

我正在制作动画加载动画。我有 3 个形状，我想沿着路径移动并在它们沿着路径移动时按比例缩放。这 3 个形状将遵循相似的路径，但起点不同。我在 Illustrator 中创建了形状和路径并导出了 SVG。这是最大形状及其路径的示例。

我的问题是没有整天尝试和错误更改路径点顺序，有没有更简单的方法来设置起点？我的形状从错误的点开始，如您所见这张图片。

.loading-wrap {
    width:200px;
    height:200px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.cir-3 {
    width:50px;
    height:50px;
    border-radius: 50%;
    background:cornflowerblue;
    position: absolute;
    top: 30%;
    left: 30%;

    offset-path: path("M147.33,108.45A49.76,49.76,0,0,0,97.57,58.69c-22.33,0-45.32,20.86-47.52,35-1.46,4.68-2.23,19.13,61,21.5-.79,14.37-43.76,9.63-61.5,6.39a49.77,49.77,0,0,0,97.78-13.09Z");
    
    animation: move 3s ease-in-out infinite reverse;
}

@keyframes move {
    100% { 
        offset-distance: 100%;
    }
}

    <div class="loading-wrap">
            <div class="cir-1"></div>
            <div class="cir-2"></div>
            <div class="cir-3"></div>
        </div>

编辑：创建了一个代码笔https://codepen.io/CodeFreeze/pen/JjGNLRN

【问题讨论】：

为每个 div 使用不同的animation-delay
@enxaneta 同意它需要有单独的延迟，但我的问题是所有对象都从右外侧开始，而它们应该从圆圈中间开始，如您在第一个图像示例中所见.

标签： css svg css-animations

【解决方案1】：

我的解决方案是为每个 div 使用 3 种不同的动画。每个 div 都有不同的初始 offset-distance，而 offset-distance 的动画值也不同。

.loading-wrap {
  width:100px;
  height:100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border:1px solid silver;
  
  position:absolute;
}

test{position:relative;}

.test div{
  position:absolute;
  offset-path: path("M97.78,49.76a49.76,49.76,0,0,0,-49.76,-49.76c-22.33,0,-45.32,20.86,-47.52,35c-1.46,4.68,-2.23,19.13,61,21.5c-0.79,14.37,-43.76,9.63,-61.5,6.39a49.77,49.77,0,0,0,97.78,-13.09z");  
}

.cir-1 {
  width:20px;
  height:20px;
  border-radius: 50%;
  background:rgb(119, 30, 30);
  animation: move 3s ease-in-out infinite;
  
}
.cir-2 {
  width:30px;
  height:30px;
  border-radius: 50%;
  background-color: blueviolet;
  offset-distance: 10%;
  animation: move2 3s ease-in-out infinite;
}
.cir-3 {
  width:50px;
  height:50px;
  border-radius: 50%;
  background:cornflowerblue;
  offset-distance: 20%;
  animation: move3 3s ease-in-out infinite;
}
@keyframes move {
  100% { 
    offset-distance: 100%;
  }
}

@keyframes move2 {
  100% { 
    offset-distance: 110%;
  }
}

@keyframes move3 {
  100% { 
    offset-distance: 120%;
  }
}




svg{position:absolute;}

<div class="loading-wrap">
<svg viewBox="0 0 100 100">
  <path d="M97.78,49.76a49.76,49.76,0,0,0,-49.76,-49.76c-22.33,0,-45.32,20.86,-47.52,35c-1.46,4.68,-2.23,19.13,61,21.5c-0.79,14.37,-43.76,9.63,-61.5,6.39a49.77,49.77,0,0,0,97.78,-13.09z" fill="none" stroke="black"/>
</svg>
<div class="test">
  <div class="cir-1"></div>
  <div class="cir-2"></div>
  <div class="cir-3"></div>
</div>
</div>

更新

如果您需要动画以相反的方式运行，您有 2 个解决方案：

你反转了 svg 路径，这意味着 yoy 正在使用此路径 M97.78,49.76L97.78,49.8A49.77,49.77 0 0 10,62.89C17.74,66.13 60.71,70.87 61.5,56.5C-1.73,54.123 -0.96,39.68 0.5,35C2.7,20.86 25.69,0 48.02,0A49.76,49.76 0 0 197.78,49.76z。

.loading-wrap {
  width:100px;
  height:100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);  
  position:absolute;
  border:1px solid silver;
}

test{position:relative;}

.test div{
  position:absolute;
  offset-path: path("M97.78,49.76L97.78,49.8A49.77,49.77 0 0 10,62.89C17.74,66.13 60.71,70.87 61.5,56.5C-1.73,54.123 -0.96,39.68 0.5,35C2.7,20.86 25.69,0 48.02,0A49.76,49.76 0 0 197.78,49.76z");  
}

.cir-1 {
  width:20px;
  height:20px;
  border-radius: 50%;
  background:rgb(119, 30, 30);
  animation: move 3s ease-in-out infinite;
  
}
.cir-2 {
  width:30px;
  height:30px;
  border-radius: 50%;
  background-color: blueviolet;
  offset-distance: 10%;
  animation: move2 3s ease-in-out infinite;
}
.cir-3 {
  width:50px;
  height:50px;
  border-radius: 50%;
  background:cornflowerblue;
  offset-distance: 20%;
  animation: move3 3s ease-in-out infinite;
}
@keyframes move {
  100% {     
    offset-distance: 100%;
  }
}

@keyframes move2 {
  100% {     
    offset-distance: 110%;
  }
}

@keyframes move3 {
  100% { 
    offset-distance: 120%;
  }
}




svg{position:absolute;}

<div class="loading-wrap">
<svg viewBox="0 0 100 100">
  <path d="M97.78,49.76L97.78,49.8A49.77,49.77 0 0 10,62.89C17.74,66.13 60.71,70.87 61.5,56.5C-1.73,54.123 -0.96,39.68 0.5,35C2.7,20.86 25.69,0 48.02,0A49.76,49.76 0 0 197.78,49.76z" fill="none" stroke="black"/>
</svg>
<div class="test">
  <div class="cir-1"></div>
  <div class="cir-2"></div>
  <div class="cir-3"></div>
</div>
</div>

您可以使用相同的路径，但将 div 设置为负偏移距离。

.loading-wrap {
  width:100px;
  height:100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border:1px solid silver;
  
  position:absolute;
}

test{position:relative;}

.test div{
  position:absolute;
  offset-path: path("M97.78,49.76a49.76,49.76,0,0,0,-49.76,-49.76c-22.33,0,-45.32,20.86,-47.52,35c-1.46,4.68,-2.23,19.13,61,21.5c-0.79,14.37,-43.76,9.63,-61.5,6.39a49.77,49.77,0,0,0,97.78,-13.09z");  
}

.cir-1 {
  width:20px;
  height:20px;
  border-radius: 50%;
  background:rgb(119, 30, 30);
  animation: move 3s ease-in-out infinite;
  
}
.cir-2 {
  width:30px;
  height:30px;
  border-radius: 50%;
  background-color: blueviolet;
  offset-distance: -10%;
  animation: move2 3s ease-in-out infinite;
}
.cir-3 {
  width:50px;
  height:50px;
  border-radius: 50%;
  background:cornflowerblue;
  offset-distance: -20%;
  animation: move3 3s ease-in-out infinite;
}
@keyframes move {
  100% { 
    offset-distance: -100%;
  }
}

@keyframes move2 {
  100% { 
    offset-distance: -110%;
  }
}

@keyframes move3 {
  100% { 
    offset-distance: -120%;
  }
}




svg{position:absolute;}

<div class="loading-wrap">
<svg viewBox="0 0 100 100">
  <path d="M97.78,49.76a49.76,49.76,0,0,0,-49.76,-49.76c-22.33,0,-45.32,20.86,-47.52,35c-1.46,4.68,-2.23,19.13,61,21.5c-0.79,14.37,-43.76,9.63,-61.5,6.39a49.77,49.77,0,0,0,97.78,-13.09z" fill="none" stroke="black"/>
</svg>
<div class="test">
  <div class="cir-1"></div>
  <div class="cir-2"></div>
  <div class="cir-3"></div>
</div>
</div>

【讨论】：