Question

我想在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;
  }
}

当然，当我希望线条变为虚线时，这不起作用。有没有人知道如何解决这个问题？

这是我的代码：http://codepen.io/anon/pen/WpZNJY

PS：我不能使用两条路径来隐藏下面的路径，因为我有一个彩色背景。

Answer 1

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

＆＃13;

<!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>

＆＃13;

Answer 2

您也可以这样使用蒙版：

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

这也可以：

享受！

但请注意......请确保您跨代浏览器测试代码，如果遇到问题，请回退到动画标签或javascript。

Answer 3

我认为您应该能够将stroke-dasharray添加到动画中并降低CSS中的破折号数组。您的codepen的更新版本;

{{post.title}}

你可能不得不玩数字来获得你想要的效果

动画虚线SVG线

3 个答案: