logo标签列表

SVG虚线动画化

cssanimationsvgline
3
我希望能够在SVG文件中制作一条虚线动画。该线应从0长度逐渐增长至整个长度。但我发现的所有方法都不适用于我。
有人有什么想法如何解决这个问题吗？
这是我的SVG文件路径：
<path class="path" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M234.3,119
    c-31-0.7-95,9-128.7,50.8"/>

为了将线条呈现为一条直线，我做了以下操作：
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

当我想要让那条线虚线化时，这并没有起作用。有没有人有解决方法？
以下是我的codepen链接：http://codepen.io/anon/pen/WpZNJY 顺便说一句：我不能使用两个重叠的路径来隐藏下面的路径，因为我有一个有颜色的背景。
您是否考虑使用JavaScript来制作此动画？ - Francis Hemsher
对我来说也可以。你有什么推荐吗？ - CaraMar
1
我可以试着做点什么。但是，我今天晚些时候还有其他任务要完成。 - Francis Hemsher
3个回答
7
您可以使用掩码来完成此操作，方法如下： 

.paths {
  fill: none;
  stroke: black;
  stroke-dasharray: 5;
}

.mask {
  fill: none;
  stroke: white;
  stroke-width: 10;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 830 500" >
  <defs>
    <path id="first" d="M234.3,119c-31-0.7-95,9-128.7,50.8"/>
    <path id="vienna" d="M382.8,243.8c2.9-36.1,15.8-110.3,110.1-145.4"/>
    <path id="budapest" d="M550.6,319.4c34-2.7,109-2.1,174.8,50.5"/>
    <path id="salzburg" d="M265,323c21.5,12.1,57.2,39.5,60.7,85.1"/>
    <path id="tyrol" d="M147.8,319.5c-27.1,7-79.7,31.3-92.8,74.2"/>
    <mask id="first-mask"><use class="mask" xlink:href="#first" /></mask>
    <mask id="vienna-mask"><use class="mask" xlink:href="#vienna" /></mask>
    <mask id="budapest-mask"><use class="mask" xlink:href="#budapest" /></mask>
    <mask id="salzburg-mask"><use class="mask" xlink:href="#salzburg" /></mask>
    <mask id="tyrol-mask"><use class="mask" xlink:href="#tyrol" /></mask>
  </defs>
  <g class="paths">
    <use xlink:href="#first" mask="url(#first-mask)" />
    <use xlink:href="#vienna" mask="url(#vienna-mask)" />
    <use xlink:href="#budapest" mask="url(#budapest-mask)" />
    <use xlink:href="#salzburg" mask="url(#salzburg-mask)" />
    <use xlink:href="#tyrol" mask="url(#tyrol-mask)" />
  </g>
</svg>

这也可以作为以下内容使用：

享受吧！

但请注意...确保您在跨浏览器测试您的代码并在出现问题时回退到动画标签或javascript。

如果你有长度差异很大的线条，那么你需要做以下两种选择之一：a) 手动为每个线条设置 stroke-dasharray 和 offset，以其近似长度 + 误差为准... 或者 b) 使用 js 获取它们的长度，但只是动画遮罩... ;) - Ruskin
这是网络上最好的答案！ - nikk wong
@Ruskin 你能帮我解决这个问题吗？-> https://stackoverflow.com/questions/67132275/animate-dotted-line-in-svg - Meivel
1
@Meivel，我会看一下，但不能保证什么。 - Ruskin
@Ruskin 预先感谢您。如果您有任何发现，能否发布您的答案？ - Meivel
4

其中一种方法是使用Javascript。它通过创建折线来复制路径。 请尝试下面的示例：

<!DOCTYPE HTML>
<html>
<head>
<style>
polyline{
stroke-dasharray:8;
stroke:black;
fill:none;
stroke-width:1;
}

</style>


</head>
<body >
This builds a smooth/dashed polylines that replicates your paths.<br>
<button onClick=animateDashPaths()>Animate Paths</button><br>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 830 500" enable-background="new 0 0 830 500" xml:space="preserve">

<path class="path" fill="none" stroke="#000000" stroke-miterlimit="10" d="M234.3,119
c-31-0.7-95,9-128.7,50.8"/>

<!-- Vienna Dash  -->
<path id="pathVienna"  display="none"  stroke-miterlimit="10" d="M382.8,243.8
c2.9-36.1,15.8-110.3,110.1-145.4"/>

<!-- Budapest Dash  -->
<path id="pathBudapest" display="none" stroke-miterlimit="10" d="M550.6,319.4
c34-2.7,109-2.1,174.8,50.5"/>

<!-- Salzburg Dash  -->
<path id="pathSalzburg" display="none" stroke-miterlimit="10" d="M265,323
c21.5,12.1,57.2,39.5,60.7,85.1"/>

<!-- Tyrol Dash  -->
<path id="pathTyrol" display="none" stroke-miterlimit="10" d="M147.8,319.5
 c-27.1,7-79.7,31.3-92.8,74.2"/>

</svg>

<script>
//---button---
function animateDashPaths()
{
var NS="http://www.w3.org/2000/svg"

//----Vienna----------------
var endLengthVienna=pathVienna.getTotalLength()
var lengthDeltaVienna=endLengthVienna/200
var polylineVienna=document.createElementNS(NS,"polyline")
Layer_1.appendChild(polylineVienna)
var pntListVienna=polylineVienna.points
var iTVienna=setInterval(drawPathVienna,5)
var cntVienna=0
function drawPathVienna()
{
   var len=lengthDeltaVienna*cntVienna++
   if(len<endLengthVienna)
   {
        var pnt=pathVienna.getPointAtLength(len)
        pntListVienna.appendItem(pnt)
   }
   else
      clearInterval(iTVienna)
}

//----Budapest----------------
var endLengthBudapest=pathBudapest.getTotalLength()
var lengthDeltaBudapest=endLengthBudapest/200
var polylineBudapest=document.createElementNS(NS,"polyline")
Layer_1.appendChild(polylineBudapest)
var pntListBudapest=polylineBudapest.points
var iTBudapest=setInterval(drawPathBudapest,5)
var cntBudapest=0
function drawPathBudapest()
{
   var len=lengthDeltaBudapest*cntBudapest++
   if(len<endLengthBudapest)
   {
        var pnt=pathBudapest.getPointAtLength(len)
        pntListBudapest.appendItem(pnt)
   }
   else
      clearInterval(iTBudapest)
}

//----Salzburg----------------
var endLengthSalzburg=pathSalzburg.getTotalLength()
var lengthDeltaSalzburg=endLengthSalzburg/200
var polylineSalzburg=document.createElementNS(NS,"polyline")
Layer_1.appendChild(polylineSalzburg)
var pntListSalzburg=polylineSalzburg.points
var iTSalzburg=setInterval(drawPathSalzburg,5)
var cntSalzburg=0
function drawPathSalzburg()
{
   var len=lengthDeltaSalzburg*cntSalzburg++
   if(len<endLengthSalzburg)
   {
        var pnt=pathSalzburg.getPointAtLength(len)
        pntListSalzburg.appendItem(pnt)
   }
   else
      clearInterval(iTSalzburg)
}

//----Tyrol----------------
var endLengthTyrol=pathTyrol.getTotalLength()
var lengthDeltaTyrol=endLengthTyrol/200
var polylineTyrol=document.createElementNS(NS,"polyline")
Layer_1.appendChild(polylineTyrol)
var pntListTyrol=polylineTyrol.points
var iTTyrol=setInterval(drawPathTyrol,5)
var cntTyrol=0
function drawPathTyrol()
{
   var len=lengthDeltaTyrol*cntTyrol++
   if(len<endLengthTyrol)
   {
        var pnt=pathTyrol.getPointAtLength(len)
        pntListTyrol.appendItem(pnt)
   }
   else
      clearInterval(iTTyrol)
}

}
</script>

</body>

</html>

谢谢！这对我非常有帮助！但是我该如何循环执行该函数以动画化所有路径（＃myPath1，＃myPath2，...）？ - CaraMar
1
与其使用循环，这个应用程序最简单的方式是为每个路径简单地重复执行每个函数。(我已经编辑了答案，显示出来) - Francis Hemsher
太好了！完美运作！谢谢！ - CaraMar
我很喜欢使用polyline创建线并使用getPointAtLength检查点的想法 — 真的很好。但是，面向对象编程在这里表现得非常差，为什么要为每个城市重复相同的代码，而不是使用一个公共函数来处理呢？ - gregmatys
0

我认为你只需要在动画中添加 stroke-dasharray 并在 CSS 中降低虚线数组即可。这是您的 CodePen 的更新版本：http://codepen.io/harvey89/pen/NpaWBE

stroke-dashoffset: 1000;
stroke-dasharray: 10;

@keyframes dash {
  to {
    stroke-dashoffset: 0;
    stroke-dasharray: 10;
  }
}

你可能需要尝试不同的数字来达到你想要的效果。

问题在于路径没有“增长”。它只是动画化了虚线。 - CaraMar
你是指像这样的东西吗：http://codepen.io/harvey89/pen/NpaWBE.path { stroke-dasharray: 10; stroke-dashoffset: 1000; animation: dash 5s linear forwards; }@keyframes dash { to { stroke-dashoffset: 0; stroke-dasharray: 0; } } - Harvey89
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接