1

我使用 SVG 开发了下图。我使用 stroke-dasharray 将点添加到路径的末尾，但是添加了多个点。如何在紫色路径的末端添加一个点？是否可以使用 stroke-dasharray 来做到这一点？

https://i.stack.imgur.com/fXFrO.png

到目前为止，这是我的 HTML：

<svg style="fill:none; stroke:#81125A" width="300px" height="200px">
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
      <stop offset="0%" stop-color="#81125A" />
      <stop offset="100%" stop-color="#81125A" />
    </linearGradient>

    <path d=" M  130.45001850481378   166  A  78 78 107 0 1 126.20062143070965 96.52297197783665" stroke="#e7e7e8"></path>

    <path d=" M  131.14095054523523   86.82703015701578  A  78 78 107 0 1 189.84677986512304 49.427292161274664" stroke="#e7e7e8"></path>

    <path d=" M  200.72216074279504   49.04751549251053  A  78 78 107 0 1 261.8938594545413 82.26103796461837" stroke="#e7e7e8"></path>

    <path d=" M  267.49850888669266   91.58874102031533  A  78 78 107 0 1 266.2203371568729 164.81515037921423" stroke="#e7e7e8"></path>

    <path d=" M  130.45001850481378   166  A  78 78 107 1 1 265.5499814951862 166" id="purple" fill='none' class="purple"></path>

    <path d=" M  130.45001850481378   166  A  78 78 107 1 1 265.5499814951862 166" id="white" fill='none' class="border"></path>

    <path d=" M  130.45001850481378   166  A  78 78 107 1 1 265.5499814951862 166" id="back" fill='none' class="fill"></path>

 </svg>

这是我的CSS：

path {
    stroke-linecap: round;
    stroke-width: 8;
  }

path.grey {
  stroke: #e7e7e8;
}

path.purple {
  stroke: url(#gradient);
  stroke-dasharray: 100,326;
  stroke-dashoffset: 100; 
  stroke-width: 8;
  animation: dash 2.6s ease-out forwards;
}

path.border {
  stroke: #81125A;
  stroke-dasharray: 0px,100px;
  stroke-dashoffset: 100px;
  stroke-width: 19.5px; 
  animation: dash 2.6s ease-out forwards;
  fill-rule: evenodd;

}

path.fill {
  stroke: #FFFFFF;
  stroke-dasharray: 0px, 100px;
  stroke-dashoffset: 100;
  stroke-width:9.5px;
  animation: dash 2.6s ease-out forwards;

}

.circle{
  height:15px;
  width:15px;
  background-color:purple;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1; 
  }
}
4

1 回答 1

0

我不确定这stroke-dasharray是正确的工具。

在这里您可能正在寻找stroke-dashoffset，它将帮助您在 SVG 的道路上取得一些进展。你可以用一些 JS 来获得它的长度：path.getTotalLength()并决定你希望它进展多长时间，用百分比或类似的方式。

本文可能会帮助您更好地理解它是如何工作的。
https://css-tricks.com/svg-line-animation-works/

好消息是您可以制作动画！请注意，因为当您的进度为 0 时，Firefox 会出现一些偷偷摸摸的行为，它可能会在初始加载时倒退（如果我没记错的话）。

于 2021-01-04T16:16:20.137 回答