程序员经验分享-hwhale

沿路径长度线性填充 SVG 动画

2024-03-09

我有一个 SVG 文件，它代表薄形。我想制作一个动画，以便整个形状似乎正在被拉出来。

我所说的三星 Galaxy S 品牌的“S”标志示例：https://codepen.io/anon/pen/MGawzy https://codepen.io/anon/pen/MGawzy

动画代码（因为 StackOverflow 强制我包含它）：

@keyframes test {
  0% {
    clip-path: inset(0px 0px 300px 0px);
  }
  80% {
    clip-path: inset(0px 0px 0px 0px);
  }
  100% {
    clip-path: inset(0px 0px 0px 0px);
  }
}

svg {
  animation: test;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

上面示例中的简单 SVG 很容易制作动画，我可以从上到下慢慢地取消裁剪 SVG。但是，如果我有一个非常复杂的形状，无法以这种方式进行动画处理（可能是 NASA 徽标中的红线：https://upload.wikimedia.org/wikipedia/commons/e/e5/NASA_logo.svg https://upload.wikimedia.org/wikipedia/commons/e/e5/NASA_logo.svg），我需要一个更好的解决方案。

只是再次澄清一下，我不想为笔画设置动画。我希望能够对填充进行动画处理，就像它开始绘制一样。

有没有通用的解决方案？如果没有通用的解决方案，我将如何在合理的时间内自行设置关键帧？

EDIT:为了提供一些见解，我正在尝试为高音谱号设置动画：https://upload.wikimedia.org/wikipedia/commons/e/e8/G-clef.svg https://upload.wikimedia.org/wikipedia/commons/e/e8/G-clef.svg


你可以这样做（描述起来容易做起来难，涉及很多繁琐的工作）：

  1. 在形状顶部绘制一条平滑路径，遵循您所认为的“路径”，并选择这样的笔画宽度，使路径覆盖形状的所有位置。
  2. 我会把最后一个点完全排除在外，因为它比其他点厚得多。
  3. 以不存在重叠部分的方式划分路径。按绘图顺序对零件进行排序，确保每个部分路径都按正确的方向绘制。
  4. 现在以相同的方式划分形状，确保每个部分正好位于顶部路径的下方。
  5. 将每个形状与顶部的其中一个路径相关联，将路径定义为形状的蒙版。路径必须有stroke:white。维持秩序。
  6. 现在您可以使用动画定义遮罩的路径stroke-dashoffset动画片 https://css-tricks.com/svg-line-animation-works/.
  7. 我会简单地隐藏最后一个点，直到伪线动画完成，然后立即显示它。

Edit:我今天确实有太多时间了，这是工作结果：

.clef {
    fill: black;
    stroke: black;
    stroke-width: 0.1;
}
mask path {
    fill: none;
    stroke: white;
    stroke-width: 6;
}
#mask1 path {
    stroke-dasharray: 100.8186 100.8186;
    stroke-dashoffset: 100.8186;
    animation: draw1 1s linear forwards;
}
@keyframes draw1 {
    from { stroke-dashoffset: 100.8186; }
    to { stroke-dashoffset: 0; }
}
#mask2 path {
    stroke-dasharray: 83.6713 83.6713;
    stroke-dashoffset: 83.6713;
    animation: draw2 1s 1s linear forwards;
}
@keyframes draw2 {
    from { stroke-dashoffset: 83.6713; }
    to { stroke-dashoffset: 0; }
}
.dot {
    opacity: 0;
    animation: reveal 0s 2.5s forwards;
}
@keyframes reveal {
    from { opacity: 0; }
    to { opacity: 1; }
}
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="200" viewBox="0 0 44 75">
  <defs>
  <mask id="mask1" maskUnits="userSpaceOnUse">
      <path d="M 24.3018,49.658 C 15.0191,46.9092 18.5393,38.1126 25.6256,38.2163 35.5458,38.3614 34.8431,54.3874 22.6943,54.1023 12.0123,53.8516 7.34095,40.0402 18.4391,30.1787 29.5373,20.3173 29.9235,12.5622 27.8005,9.28112" />
  </mask>
  <mask id="mask2" maskUnits="userSpaceOnUse">
      <path d="M 27.8005,9.28112 C 25.1382,5.16638 17.6602,8.86888 20.5194,22.1412 L 28.1788,57.6956 C 31.6264,73.699 16.4903,72.3627 15.035,62.329" />
  </mask>
  </defs>
  <path class="clef" mask="url(#mask1)" d="M 26.8522,9.90048 C 26.912,9.95039 26.9649,10.0085 27.0101,10.075 27.4815,10.7683 28.6214,14.0098 25.3767,19.8157 22.846,24.3437 11.0718,30.2815 10.2077,40.9075 9.45969,50.1477 19.1325,56.9723 27.4811,54.2894 33.0239,52.5081 35.8812,44.0959 32.4504,39.7568 23.3964,28.3057 8.87616,45.8309 22.9422,50.6319 21.4126,49.4286 20.37,48.4968 20.1759,47.3578 18.286,36.2692 34.9591,39.1968 30.4666,49.7165 28.6194,54.0421 21.1577,54.879 16.9085,51.0198 13.3489,47.787 11.7693,41.5593 15.7305,37.0885 21.0956,31.0332 27.4302,25.5974 29.1125,17.3081 29.7841,13.9988 29.4887,10.9357 28.6445,8.70078 Z" />
  <path class="clef" mask="url(#mask2)" d="M 15.7311,63.3465 C 15.3353,65.46 17.5402,69.8491 21.9764,69.9924 27.3392,70.1658 30.7655,66.0634 29.1692,59.3682 L 21.164,22.4229 C 20.2111,18.0249 20.9262,15.6394 21.4351,14.2178 22.7185,10.6326 25.8192,9.03863 26.8522,9.90048 L 28.6445,8.70078 C 26.9883,4.31578 23.2199,3.11893 20.4997,9.50576 19.1217,12.7412 18.6085,15.989 19.9279,22.2128 L 27.9268,59.9444 C 28.4995,62.6457 28.1161,66.3629 25.595,68.0714 24.3461,68.9177 19.9267,69.5001 18.8455,67.48" />
  <path class="clef dot" d="M 15.6702,63.6634 A 3.77139,3.8362 1.075 0 1 19.5129,59.8986 3.77139,3.8362 1.075 0 1 23.2116,63.8049 3.77139,3.8362 1.075 0 1 19.3689,67.5697 3.77139,3.8362 1.075 0 1 15.6702,63.6634 Z" />
</svg>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

Animation

SVG

沿路径长度线性填充 SVG 动画 的相关文章

  • Bootstrap .row margin-left: -15px - 为什么它会缩进（来自文档）

    我在 Bootstrap 文档中看到了这一行 http getbootstrap com css grid intro http getbootstrap com css grid intro It says 列通过填充创建装订线 列内容之

  • 如何在索引视图中打印关联数据

    subjects this gt Subjects gt find all contain gt Users fields gt Users username Users email gt hydrate false gt toArray

  • Rails 上的 SASS 无效 CSS 错误

    我正在尝试使用http startbootstrap com stylish portfolio http startbootstrap com stylish portfolio但是 在我的 Rails 应用程序中 我在 vintage

  • 如何选择一个元素但排除其子元素

    我明白 div hover not class 作品 但是 如何实现 LI 元素的 悬停 效果 但排除鼠标悬停在LI内的某个 DIV 上时的悬停效果 E G li Hello div Bye div li 我想获得 li 的悬停效果 li

  • 角度材质表-表内边框

    I am using Angular material table and I want to set border inside the table Using CSS I was able to set border Normal ca

  • 如何让 ExtJS ComboBox 与文本一起显示？

    我想让以下内容显示在一行中 我尝试过使用样式浮动和显示 Show this input

  • Ace Editor 自动完成和多种语言

    如何为 Ace 编辑器创建自动完成功能以及如何突出显示 php 中的 html javascript 和 csshttp ace ajax org http ace ajax org

  • 获取SVG绘图的边界框

    我想提取 SVG 绘图的边界框 由于 Python 已经在系统上可用并且还用于执行其他任务 因此我不想使用 JavaScript 或任何其他语言 我的理解是是否可以计算单个元素的边界框 但我不知道如何计算 整个绘图的边界框只是所有元素的最小

  • 等高列并将最后一项与底部对齐

    我有一个列表 其中每个li有嵌套容器 我尝试为所有列表项保留相同的高度 并将最后一个 div 推到底部 我将如何使用 flex 来做到这一点 ul list container display inline flex justify con

  • JQuery 设置动态最大宽度

    我不太擅长 jQuery 因此完整的代码解决方案将是理想的选择 该函数将 获取浏览器屏幕的 70 宽度 将该宽度转换为其相应的 px 值 设置最大宽度 mainContainer使用从转换 计算中获得的值 这是我要设置的容器的 CSS 样式

  • 移动设备中的 CSS 响应式设计不适用于 uc 浏览器和 Opera Mini [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 UC 和 Opera Min 浏览器上的响应式网站无法正常工作 我们使用媒体查询进行响应式设计 我搜索了一下 发现了一些

  • 使用最后一个子选择器减少 CSS

    我在用less并试图得到last输入有一个边距底部 of 10px 这是我所拥有的 但它不起作用 并且没有在最后一个输入上应用 margin bottom 有什么想法吗 input margin bottom 0px last child

  • 如何使用CSS缩进多级select optgroup？

    只是试图通过嵌套深度缩进 optgroup 块 我尝试了一般margin left规则 嵌套元素然后尝试应用相同的规则 尝试过padding left 这样的缩进可能吗 看起来很简单 P 在下面的示例中 标记为 client2 a 的 op

  • 重新加载页面时删除哈希值？

    我使用哈希来切换我的图像滑块 当我重新加载页面并且哈希值设置为 e h 3 没有图片 当图库在几秒钟后自动滑动时 它显示下一个 所以几秒钟内什么也没有 有没有办法在加载页面时检查哈希并将其删除 我只想关心那些用散列为页面添加书签的人 问候

  • 如何在 CSS 中将 RadioButton 图标样式设置为无（在 Flex 3 中）？

    您可以通过在 CSS 中设置以下值来在 Flex 中设置 RadioButton 的外观 upSkin Embed overSkin Embed ownSkin Embed disabledSkin Embed selectedUpSkin

  • Webkit 是否有 CSS3 网格布局的有效实现？

    CSS 网格布局 编辑草案 2011 年 11 月 21 日 http dev w3 org csswg css3 grid align 我正在制作一个原型 该原型将在选定的设备和浏览器上向客户展示 目前我并不担心跨浏览器兼容性 IE10开

  • 如何让 jstree 节点显示长的、可能是多行的内容？

    当使用jsTree插件 http www jstree com 我需要有一个显示其完整内容的节点 目前 每个节点仅显示大约一行文本 如何让 jsTree 中的节点显示节点中的所有文本而不截断节点的内容 下面的 CSS 代码就可以解决这个问题

  • 裁剪 SVG 的正确方法？

    我对 SVG 图像完全感到困惑 我想将图像裁剪为其核心内容 我想通过指定其视图框和 或视口和 或其他任何内容来裁剪它 除非我不想更改折线元素中的任何点 图像按原样呈现类似这样的内容 注意 边框仅用于说明目的 边框实际上并不是 SVG 的一部

  • 使用 float:left 与 display:inline-block 的 jQuery UI 拖放排序比较

    我这里有两个例子 这两个例子之间的唯一区别是 一种使用display inline block 另一种使用float left li doc item 显示 内联块 与 li doc item float left 我的问题是 displa

  • 为什么我的 Web 组件 CSS 不显示？我没有使用shadowDOM

    我有一个没有使用 ShadowDOM 的 Native V1 组件 所以我将 CSS 放在 但是当其他人使用我的组件时 我的 CSS 就不再起作用了 仅当其组件确实使用 ShadowDOM 时才会发生这种情况 我的组件的示例代码 class

随机推荐

  • iOS4 睡眠时 Wifi 连接无法保持

    知道iOS4支持wifi在睡眠状态下保持存活真是一件令人高兴的事情 然而我得到了一些不同的经历 我有 2 台 iPod 第二代 iPod 和第三代 iPod 两者均更新至 iOS 4 beta iPod 2g 可以在睡眠时保持 WiFi 连

  • 安装时自动启动 Windows 服务

    我有一个使用 InstallUtil exe 安装的 Windows 服务 即使我已将启动方法设置为自动 但该服务在安装时并未启动 我必须手动打开服务并单击启动 有没有办法通过命令行或通过服务代码启动它 在 Installer 类中 添加

  • 如何将环境配置文件配置添加到 SBT

    在 Maven 中 您可以拥有 Profiles 它可以为不同的环境设置构建配置 例如 DEV QA UAT 生产 为了支持持续集成 必须有一种方法来告诉 SBT 在哪个环境上运行 如何在 SBT 中针对不同环境进行设置 例如 DEV QA

  • 使用 unnest 在 postgreSQL 中进行批量更新

    我正在尝试进行批量更新 gt update ti table set enabled T enabled from select from unnest array 2001622 2001624 2007903 as id unnest

  • 如何在本机反应中使用 MapLibre GL Js

    我正在寻找一种在我的反应本机应用程序中使用 OpenStreetMap 数据的方法 在我最近的研究中 我发现MapLibre https maplibre org 这是基于MapBox GL旧版本的免费选项 我面临的问题是 除了 react

  • 在线生成 JHipster 应用程序提供空白页面

    当我从本地安装的 JHipster 4 7 生成应用程序时 我可以通过运行 mvnw 在 localhost 8080 上启动它 没有任何问题 但是当我在线生成项目时https start jhipster tech https start

  • 如何用动画取消隐藏视图

    假设我在 iOS 版 Xcode 中有一个隐藏视图 现在 当我将视图设置为不隐藏 view hidden NO 时 如何使其现在显示 但带有动画 你可能想要的不是设置view hidden 但要设置view alpha to 0 对应于hi

  • sqlalchemy 连接到服务器，不指定数据库

    是否可以连接到MSSQL服务器 using sqlalchemy然后创建数据库 我使用以下内容 sqlalchemy create engine mssql pyodbc sa pwd localhost 但我收到一个错误 Detail D

  • XML：尾随部分不允许有内容

    我收到这些错误 Multiple annotations found at this line error Error parsing XML not well formed invalid token Content is not all

  • GraphQL：你能改变查询的结果吗？

    书面这个问题 https stackoverflow com questions 52318135 defining mutations in graphql via fields is this bad practice 52322818

  • .net 中的 Ftp 文件监视程序（如 SystemFileWatcher）？

    在我的项目中 我需要连续观看多个 FTP 文件夹 如果有任何新文件出现 我需要选择文件名并执行一些处理 如果那是正常的 Windows 本地文件系统文件夹 我可以通过使用来实现系统文件观察器 net 的 有没有类似的东西系统文件观察器观看

  • 在 C++/CLI 中使用 .NET (3.5) 任务并行库

    好吧 我下载了 Reactive Extensions for NET 3 5 以便在 Visual Studio 2008 中通过 c cli 使用它 但所有任务并行库示例都是用 C 编写的 我什至无法弄清楚将简单的 C 语句转换为 C

  • Xamarin.iOS 上的本地化

    我正在尝试解决 Xamarin iOS 上的本地化问题 总的来说 我对本地化很陌生 但我们想要做的第一种语言是冰岛语 如果你查看 iOS 设备本身的设置 冰岛语不是一个选项 所以这是一个由两部分组成的问题 如何在我的应用程序中设置本地化 我

  • WPF/C#：如何在 TabControl 中引用 TabItem？

    我确信我错过了一些简单的东西 但我必须承认 在这一点上我不知所措 我以编程方式将 TabItems 添加到我的主 TabControl 一个对应于用户选择打开的每个帐户 在创建和添加新的 TabItem 之前 我想检查用户是否已在另一个选项

  • 在 Gradle 和 IntelliJ 2016.3.5 中使用断点调试 JVM 应用程序（Java 或 Scala）

    我有一个 JVM 应用程序 需要在 IntelliJ 2016 3 5 中使用断点和 Gradle 任务 作为依赖项运行和测试 进行调试 关于如何使用 Gradle 和 IntelliJ 完成调试有多种来源 使用 IntelliJ 调试 G

  • Redis 作为消息代理

    Question 我想以发布 订阅的方式在应用程序之间传递数据 数据产生的速度可能比消耗的速度高得多 并且消息会丢失 这不是问题 想象一下一个快速传感器和一个慢速传感器数据处理器 为此 我使用 redis pub sub 并编写了一个充当订

  • 更改 KeyPress 上 JTextField 的大小

    当用户在文本字段中输入文本时 我必须扩展 KeyPressed 事件上 JTextField 的大小 请告诉我如何实现此目的 提前致谢 好的 跳起来 我们假设问题是 如何调整 JTextField 的宽度以始终适合其内容宽度 平时的合作者

  • p:commandButton 立即 = true

    当我声明时会采取什么行动immediate true 在命令按钮中 文档说 布尔值 确定操作事件的phaseId 当在 应用请求值 阶段处理 true 操作时 当在 调用应用程序 阶段处理 false 时 但是 我不明白 有人可以解释一下吗

  • 如何防止滚动条与内容重叠？

    我有一个预格式化代码块 它水平溢出 因此有一个水平滚动条允许用户查看内容 overflow auto 然而 在 IE7 也许其他 IE 版本 中 滚动条与我的内容的最后一行重叠 当只有一行内容时 这尤其令人恼火 我已经尝试过列出的解决方案h

  • 沿路径长度线性填充 SVG 动画

    我有一个 SVG 文件 它代表薄形 我想制作一个动画 以便整个形状似乎正在被拉出来 我所说的三星 Galaxy S 品牌的 S 标志示例 https codepen io anon pen MGawzy https codepen io a

热门标签