程序员经验分享-hwhale

动画 SVG 虚线

2024-03-30

我想制作一个动画虚线在 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"/>

将线条动画化为straight我做的行：

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

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

当然，当我想要虚线时，这是行不通的。 有人知道如何解决这个问题吗？

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

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


您也可以仅使用掩码来做到这一点，如下所示：

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

这也可以作为：

  • 单点路径的codepen https://codepen.io/elliz/pen/prYqwx
  • 这些平面轨迹的代码笔 https://codepen.io/elliz/pen/dmYdNb

Enjoy!

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

Animation

SVG

line

动画 SVG 虚线 的相关文章

  • 显示居中的图像行

    我有一排三张图像 目前显示得很好 现在 我想在这三个图像的正下方显示另外两个图像 并且我希望它们居中 它看起来有点像一个颠倒的金字塔 无论我做什么 底行都保持左对齐 这是 css category width 176px font size

  • 在 Jade 模板中包含 SVG xml

    是否可以创建一个 Jade mixin 它从文件系统读取文件 并将其回显到渲染的 HTML 中 我试过这个 mixin svg file var fs require fs var xml fs readFileSync file div

  • 滚动效果：先慢后快

    我正在尝试创建滚动效果 当onclick事件被触发 我想要那个div1滚动到dev2 一开始应该慢 然后快 这是一个使用此效果的网站 http community saucony com kinvara3 http community sa

  • AngularJS：ng-show 与 display:none

    我有一个用例 我必须使用 CSS 默认隐藏 HTML 元素 如下所示 HTML div class item div CSS item display none 但是 我需要在页面加载后使用 ng show 切换元素的可见性 如下所示 di

  • 如何编辑 QProgressBar 的样式表

    我无法在我的应用程序中编辑进度条的颜色 仅编辑文本颜色 pyhton 3 9 PySide6 QT Creator 7 0 2 Python应用程序 https i stack imgur com 6hKFI png import sys

  • 将自定义 CSS 添加到使用 Compass 生成的精灵中

    我有这个代码my images scss file icon layout smart icon sprite dimensions true import icon png include all icon sprites 输出是这样的

  • 可以在 IE 中的表格行上添加渐变吗？

    当我将鼠标悬停在表格特定部分的表格行上时 我希望背景更改为线性渐变 CSS 很简单 tbody row links tr hover background typical multi browser linear gradient code

  • 限制在三角形内

    我正在寻找一段通用代码 javascript 它可以与 jquery UI 一起使用来限制三角形内 div 的移动 拖动 与此类似 http stackoverflow com questions 8515900 how to constr

  • HTML 嵌入对象具有灰色背景。可以透明吗？

    我使用带有开源插件的 Firefox 来播放视频 视频被 尽可能好地 缩放以适应嵌入对象的宽度和高度中定义的可用空间 但有时右侧和 或底部会有一点灰色边框 看来这不是我的父 div 的背景颜色 因为更改它根本没有效果 这是 HTML div

  • CSS 转换在toggleClass() 之后不起作用

    我创建了一个切换菜单 如图所示这个演示 http jsfiddle net 85Ryan Hrsdw 1 我添加了一个CSS过渡效果div nav menu 我用过max height 0 to max height 480px 当我单击菜

  • HTML 链接在移动设备上不可点击，但在桌面设备上可点击

    我在使用移动网站顶部的两个按钮时遇到问题 www thefrienddentist ie 它们在桌面上可点击 但在移动设备上我没有得到任何响应 html 放置在 WP 主题的标题中 div style background color wh

  • Angular4 - 滚动到锚点

    我正在尝试对同一页面上的锚元素进行简单的滚动 基本上 用户点击 尝试 按钮 它就会滚动到页面下方 ID 为 登录 的区域 现在 它正在与一个基本的id login a href login a 但它正在跳转到该部分 理想情况下 我希望它滚动

  • 如何使用 Bourbon Neat Framework 实现移动优先

    我一直在使用 bourbon clean 来进行桌面优先布局 效果很好 不过 我想做一个移动优先版本 从移动开始 然后逐步向上 默认网格为 12 列 对于移动设备 我通常使用 4 列网格 我尝试将网格更改为 4 列 然后扩展到 12 列 但

  • 如何将模糊屏幕设置为整页并在点击页面时转到顶部

    CSS1 有效 parentDisable z index 2000 width 100 height 100 display none position absolute left 0 background url images btra

  • 带有右侧固定侧边栏的 Bootstrap 响应式网格

    我想创建一个带有类似引导程序的模板 它尊重网格的响应系统 在图中 导航栏和右侧 包含两个按钮 是粘性的 始终显示在视图上 我的问题是右侧 因为在引导网格系统中 右侧块将被视为单行 而主要内容包含多行 我怎样才能做到这一点 围绕整个 Boot

  • 我的整个 Rails 应用程序仅从一个文件获取 css 为什么

    我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css 我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从p

  • 元素不适应 Firefox 上的

    使用 ES6 ish D3js 模块运行 Angular 6 应用程序会导致 Firefox 出现问题 Chromium Chrome Safari 和 IE Edge 工作正常 伪代码看起来类似于 生产代码可以在下面找到

  • CSS：理解和调整字体的行距/行高

    有人问了一个非常相似的问题here https stackoverflow com questions 13701110 css remove line height leading on larger text但确实回答得足够了 CSS

  • CSS 动画自定义属性/变量

    一段时间以来我一直在努力让它发挥作用 关键是内部 div 将具有某种形状 并且可能会不止一个 这就是为什么我使用nth child选择器 这个内部 div 应该显示然后再次隐藏一段时间 问题是 我想在一个动画中为所有 后来的 多个内部 di

  • 带缩略图的轮播和 bootstrap v4

    我看到了带有缩略图的轮播演示bootstrap 3 here http jsfiddle net talmand JS6JV 我正在尝试为 bootstrap v4 实现相同的功能 但无法弄清楚如何修复一些 UI 细节 例如左 右阴影覆盖整

随机推荐

  • 使用 PHP 从 Excel 文件 (xlsx) 中提取图像

    如何使用PHPExcel从excel文件中读取图像并将图像保存在服务器中并显示它们 该文件的扩展名是 xlsx My code objPHPExcel PHPExcel IOFactory load path foreach objPHPE

  • 函数类型可以通过推理来定义吗？

    Scala 类型推断非常好 而且很容易习惯 不必写两次 当你不得不这么做的时候 你会更痛苦 函数类型就是这样的一个例子 有时我想为某些函数签名创建命名类型 有可能吗 有什么方法可以获取函数的编译时类型 这样我在定义时就不必再次输入它FTyp

  • 如何在引导后注入会话/用户对象？

    有一些示例将不同类型的对象注入到演示者中 但我找不到如何完成此操作的解释 In the 引导程序代码 http dev arcbees com gwtp get started Bootstrap Code html例如他们正在注入ASec

  • 如何测试 GAS 中的触发功能？

    Google Apps 脚本支持Triggers https developers google com apps script understanding triggers 那次通过Events https developers goog

  • 是否有 pycharm_helpers 的存储库

    最近我开始使用皮查姆 2017用于Docker 中的远程调试我意识到 PyCharm 的每个版本都会有一个新的图像pycharm helpers被拉取 根据构建使用不同的标签 有什么办法可以下载全部吗pycharm helpers图片 或者

  • 在 tibble 中添加具有可变列名称的列

    此代码无法在 tibble 中添加列 library tidyverse df lt data frame Oranges 5 mycols lt c Apples Bananas Oranges add column df mycols

  • spring mvc 不返回 json 内容 - 错误 406

    我正在使用 Spring MVC 和 JSON 如中指定的Ajax 简化 Spring 3 0 文章 http blog springsource org 2010 01 25 ajax simplifications in spring

  • IIS 10 上的 OWIN WebApi 项目对所有操作均给出 404

    我有一个 OWIN WebAPI 项目 它在 OwinSelfHost 中工作 但在 IIS 10 上托管时总是导致 404 唯一有效的是初始页面 public index html 我在 Windows 10 计算机上运行 IIS 10

  • 如何在meteor上创建默认用户？

    如果不存在用户 我想创建一个管理员用户 我在服务器文件夹内的 js 文件上尝试过 Meteor startup function if Meteor users find count var options username admin p

  • 如何用反应钩子停止负数？

    我使用 React Hook 来增加和减少数字 但是当减少到0以下然后计算负值时我遇到了一个问题 我不想要负值 如何使用react hook停止负值 我已经尝试过这段代码 import React useState useEffect fr

  • 设置 DateTimePicker 的绑定值

    我有一个名为 Employee 的 EF 实体 它有一个可为空的 DateTime 属性 TerminationDate DisplayName Termination Date DisplayFormat ApplyFormatInEdi

  • 访问 VBA OpenForm 分组和排序

    我有一个用于数据输入的表格 我们必须返回并添加数据到这些记录中 有没有办法拉出按字段 A 对记录进行分组并按字段 B 排序的表单 这本质上会对表格 A1 1 A1 2 等进行排序 从而使添加数据变得更加容易 现在我使用 DoCmd Open

  • 服务器端处理 JWT 令牌的最佳实践[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 产生自这个线程 https stackoverflow com questions 30494383 using jwt with active

  • WPF 列表框 IndexFromPoint

    我正在 WPF ListBoxes 之间执行拖放操作 我希望能够将其插入到集合中被拖放的位置而不是列表末尾 有谁知道类似于 WinForms ListBox IndexFromPoint 函数的解决方案 我最终通过使用 DragDropEv

  • 处理 Reactor 中的并联通量

    我已经从 iterable 创建了一个并行通量 对于每个可迭代 我都必须进行休息调用 但是在执行时 即使任何一个请求失败 所有剩余的请求也会失败 我希望所有的请求都能被执行 无论失败或成功 我目前正在使用 Flux fromIterable

  • Html.Partial 不渲染部分视图

    我在视图中有以下代码 if SiteSession SubPageHelper DisplayType DisplayType List Html Partial SubLandingPage List else Html Partial

  • 可达性未按预期工作

    从 Apple 下载了 Reachability 使用此方法检查活动连接 BOOL isReachable Reachability r Reachability reachabilityWithHostName http www goog

  • LinkedIn 身份验证和聚合数据

    我正在使用 Ruby on Rails 构建一个 Web 应用程序 我希望我的用户能够验证和聚合来自 Linked In 以及其他类似 Github Twitter 等 的数据 我正在使用这些宝石 设计注册 用于身份验证的omniauth

  • Android：更改按钮的父视图

    我有一个RelativeLayout 里面有一个按钮 一旦用户单击该按钮 我想更改父视图 RelativeLayout 的背景 我知道我可以通过将父视图存储在变量中或在按钮上设置标签来做到这一点 但我会避免这种情况 我有充分的理由不希望这样

  • 动画 SVG 虚线

    我想制作一个动画虚线在 SVG 文件中 该线应该从 0 长度 增长 到全长 我发现的所有方法都不适合我 有谁有想法 如何解决这个问题 这是我的 svg 文件中的路径

热门标签