动画 SVG 虚线

【问题标题】：Animate dashed SVG line动画 SVG 虚线
【发布时间】：2018-03-13 10:18:27
【问题描述】：

我想在 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：我不能使用两条相互重叠的路径来隐藏下面的路径，因为我有彩色背景。

【问题讨论】：

  • 您要考虑为这个动画使用 Javascript 吗？
  • 对我来说也可以。你有什么建议吗？
  • 我可以试一试。但是，直到今天晚些时候，我还有其他承诺。

标签： css animation svg line


【解决方案1】：

你也可以像这样使用掩码来做到这一点：

.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 手动设置每个 css 并偏移到它们的大约长度 + fudge ...或 b) 使用 js得到他们的长度，然后只是动画面具......;）
  • 这是网络上最好的答案！
  • @Ruskin 你能帮我处理这张票吗 -> stackoverflow.com/questions/67132275/animate-dotted-line-in-svg
  • @Meivel，我会看看，当然，但不能保证任何事情。
  • @Ruskin 提前致谢。如果你有什么可以发布你的答案吗？
【解决方案2】：

其中一种方法是使用 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，...）？
  • 与循环相比，此应用程序最简单的方法是仅对每个路径重复每个函数。 （我已经编辑了显示这个的答案）
  • 太棒了！工作完美！谢谢！
  • 我喜欢创建polyline 并通过getPointAtLength 检查点的想法——真的很好。但是这里的 OOP 真的很差，为什么要为每个城市重复相同的代码而不使用一个通用的函数呢？
【解决方案3】：

我认为您应该能够将 stroke-dasharray 添加到动画中并降低 CSS 中的 dash 数组。您的 codepen 的更新版本； http://codepen.io/harvey89/pen/NpaWBE

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

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

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

【讨论】：

  • 问题是，路径没有»增长«。它只是为虚线设置动画。
  • 你的意思是这样的：codepen.io/harvey89/pen/NpaWBE.path { stroke-dasharray: 10;冲程-dashoffset：1000；动画： dash 5s 直线前进； } @keyframes dash { to { stroke-dashoffset: 0;中风破折号：0； } }
猜你喜欢
  • 1970-01-01
  • 2023-01-15
  • 2014-07-24
  • 2015-10-20
  • 2019-11-04
  • 1970-01-01
  • 2017-10-12
  • 2022-01-18
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode