程序员经验分享-hwhale

从左到右显示 SVG 动画

2024-05-04

我有两个 SVG 图像，我想将它们设置为动画，如下所示，首先显示Full Screen文本从左到右，然后用第二个 SVG 覆盖该单词Screen显示整个第二个 SVG。因此，最后我将得到第二个 svg 中的单词“Full”黑色空间，以及单词“size view”

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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 2408.08 168.78" style="enable-background:new 0 0 2408.08 168.78;" xml:space="preserve">
<g>
    <path d="M1361.83,146.6l11.96-18.17c12.85,9.53,26.37,14.4,38.33,14.4c11.52,0,18.17-4.87,18.17-12.63v-0.44
        c0-9.08-12.41-12.19-26.15-16.4c-17.28-4.88-36.56-11.96-36.56-34.34v-0.44c0-22.16,18.39-35.67,41.66-35.67
        c14.62,0,30.58,5.1,42.98,13.29l-10.63,19.06c-11.3-6.87-23.27-11.08-33.01-11.08c-10.41,0-16.4,4.88-16.4,11.52v0.44
        c0,8.64,12.63,12.19,26.37,16.62c17.06,5.32,36.34,13.07,36.34,34.12v0.44c0,24.59-19.06,36.78-43.43,36.78
        C1394.84,164.1,1376.45,158.12,1361.83,146.6z"/>
    <path d="M1488.34,4.28h28.8v25.48h-28.8V4.28z M1489.45,47.71h26.81V164.7h-26.81V47.71z"/>
    <path d="M1551.49,146.31l67.58-76.66h-65.14V47.71h99.26V66.1l-67.58,76.66h67.58v21.94h-101.7V146.31z"/>
    <path d="M1676.68,103.83v-0.44c0-33.46,23.71-60.93,57.17-60.93c37.22,0,56.06,29.25,56.06,62.93c0,2.44-0.22,4.87-0.44,7.53
        h-85.97c2.88,19.06,16.4,29.69,33.68,29.69c13.07,0,22.38-4.88,31.68-13.96l15.73,13.96c-11.08,13.29-26.37,21.94-47.86,21.94
        C1702.82,164.54,1676.68,139.95,1676.68,103.83z M1763.31,95.19c-1.77-17.28-11.96-30.8-29.69-30.8c-16.4,0-27.92,12.63-30.36,30.8
        H1763.31z"/>
    <path d="M1883.4,46.67h28.8l31.46,85.97l31.69-85.97h28.14l-47.86,117.88h-24.15L1883.4,46.67z"/>
    <path d="M2032.29,4.28h28.8v25.48h-28.8V4.28z M2033.4,47.71h26.81V164.7h-26.81V47.71z"/>
    <path d="M2094.33,103.83v-0.44c0-33.46,23.71-60.93,57.17-60.93c37.22,0,56.06,29.25,56.06,62.93c0,2.44-0.22,4.87-0.44,7.53
        h-85.97c2.88,19.06,16.4,29.69,33.68,29.69c13.07,0,22.38-4.88,31.68-13.96l15.73,13.96c-11.08,13.29-26.37,21.94-47.86,21.94
        C2120.47,164.54,2094.33,139.95,2094.33,103.83z M2180.96,95.19c-1.77-17.28-11.96-30.8-29.69-30.8c-16.4,0-27.92,12.63-30.36,30.8
        H2180.96z"/>
    <path d="M2224.83,46.67h27.48l23.49,80.21l25.92-80.65h23.04l25.92,80.65l23.93-80.21h27.03l-38.33,117.88h-24.15l-26.15-79.99
        l-26.37,79.99h-23.93L2224.83,46.67z"/>
</g>
<path d="M365.88,2.95h905.85V164.7H365.88V2.95z"/>
</svg>



<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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 2408.08 168.78" style="enable-background:new 0 0 2408.08 168.78;" xml:space="preserve">
<g>
    <path d="M1.72,2.95h130.06v25.88H32.43v44.13h88.12v25.88H32.43v65.85H1.72V2.95z"/>
    <path d="M151.18,119.34V44.89h26.81v66.47c0,18.17,9.08,28.36,25.04,28.36c15.51,0,26.37-10.64,26.37-28.8V44.89h27.03v116.99
        h-27.03v-18.17c-7.53,11.08-18.39,20.61-36.56,20.61C166.47,164.32,151.18,146.6,151.18,119.34z"/>
    <path d="M296.97,2.95h26.81V164.7h-26.81V2.95z"/>
    <path d="M365.88,2.95h26.81V164.7h-26.81V2.95z"/>
    <path d="M497.93,139.28l16.4-19.5c14.85,12.85,29.91,20.16,48.97,20.16c16.84,0,27.48-7.98,27.48-19.5v-0.44
        c0-11.08-6.2-17.06-35.01-23.71c-33.01-7.98-51.63-17.73-51.63-46.31v-0.44c0-26.59,22.16-44.98,52.96-44.98
        c22.6,0,40.55,6.87,56.28,19.5l-14.62,20.61c-13.96-10.41-27.92-15.95-42.1-15.95c-15.95,0-25.26,8.2-25.26,18.39v0.44
        c0,11.97,7.09,17.28,37,24.37c32.79,7.98,49.63,19.72,49.63,45.42v0.44c0,29.03-22.82,46.31-55.39,46.31
        C538.92,164.1,516.54,155.9,497.93,139.28z"/>
    <path d="M646.16,104.05v-0.44c0-33.24,25.7-61.15,60.93-61.15c21.94,0,35.67,8.2,46.75,20.16l-16.84,17.95
        c-8.2-8.64-16.84-14.62-30.13-14.62c-19.5,0-33.9,16.84-33.9,37.22v0.44c0,20.83,14.4,37.45,35.01,37.45
        c12.63,0,21.94-5.76,30.36-14.4l16.17,15.95c-11.52,12.85-25.04,21.94-47.86,21.94C671.86,164.54,646.16,137.29,646.16,104.05z"/>
    <path d="M784.64,47.71h26.81v26.37c7.31-17.5,20.83-29.47,41.43-28.58v28.36h-1.55c-23.49,0-39.88,15.29-39.88,46.31v44.54h-26.81
        V47.71z"/>
    <path d="M871.28,103.83v-0.44c0-33.46,23.71-60.93,57.17-60.93c37.22,0,56.06,29.25,56.06,62.93c0,2.44-0.22,4.87-0.44,7.53h-85.97
        c2.88,19.06,16.4,29.69,33.68,29.69c13.07,0,22.38-4.88,31.69-13.96l15.73,13.96c-11.08,13.29-26.37,21.94-47.86,21.94
        C897.42,164.54,871.28,139.95,871.28,103.83z M957.91,95.19c-1.77-17.28-11.96-30.8-29.69-30.8c-16.4,0-27.92,12.63-30.36,30.8
        H957.91z"/>
    <path d="M1010.64,103.83v-0.44c0-33.46,23.71-60.93,57.17-60.93c37.22,0,56.06,29.25,56.06,62.93c0,2.44-0.22,4.87-0.44,7.53
        h-85.97c2.88,19.06,16.4,29.69,33.68,29.69c13.07,0,22.38-4.88,31.69-13.96l15.73,13.96c-11.08,13.29-26.37,21.94-47.86,21.94
        C1036.79,164.54,1010.64,139.95,1010.64,103.83z M1097.28,95.19c-1.77-17.28-11.96-30.8-29.69-30.8c-16.4,0-27.92,12.63-30.36,30.8
        H1097.28z"/>
    <path d="M1156.44,47.71h26.81v17.95c7.53-10.86,18.39-20.38,36.56-20.38c26.37,0,41.66,17.73,41.66,44.76v74.67h-26.81V98.23
        c0-18.17-9.08-28.58-25.04-28.58c-15.51,0-26.37,10.86-26.37,29.03v66.03h-26.81V47.71z"/>
</g>
</svg>

I am relly new to SVG and I've got no clue how :( enter image description here


如何做到这一点有很多选择：

  • use clipping https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking并为剪辑设置动画
  • use masking https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking并为蒙版设置动画
  • 直接为封面设置动画（下面使用stroke-dashoffset)
  • ... ?

您可以使用纯CSS或使用javascript（可能与类似的库一起使用）svg.js https://svgjs.com/ or snap.svg http://snapsvg.io/)

正确的一种取决于许多因素。

下面是一个（简化的）示例，灵感来自这一页 https://css-tricks.com/animate-calligraphy-with-svg/, using path元素作为封面，stroke-dasharray作为“长线孤独空间”，并动画stroke-dashoffset得到想要的结果：

<!doctype html>
<html>
<head>
    <style>
        svg { background: black }
        #cover1 { animation: reveal1 2s linear; }
        #cover2 { animation: reveal2 2s linear forwards; animation-delay: 2s }
        @keyframes reveal1 {
            0% { stroke-dashoffset: 80; }
            100% { stroke-dashoffset: 0; }
        }
        @keyframes reveal2 {
            0% { stroke-dashoffset: 0; }
            100% { stroke-dashoffset: -80; }
        }
    </style>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="75" height="30">
        <text y="20" fill="white">Full screen</text>
        <path id="cover1" d="M 22 15 H 80" stroke-dasharray="80 80" stroke-width="20" stroke="white"/>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="30">
        <text y="20" fill="lightgrey">size view</text>
        <path id="cover2" d="M 0 15 H 60" stroke-dasharray="80 80" stroke-width="20" stroke="black"/>
    </svg>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

SVG

从左到右显示 SVG 动画 的相关文章

随机推荐

  • 如何在 Angular i18n 路由器模块中使用 LOCALE_ID

    我正在使用 Angular 的 i18n 设置构建一个小型 Angular 应用程序 除了 url 路径和 slugs 的翻译之外 一切都工作正常 我尝试了一种可能的解决方案 为每种语言提供一个路由模块 如此处所述 但这不起作用 我以为我可

  • OkHttp + 毕加索 + 改造

    问题是如何将所有这些结合起来3一个项目中的库 制作一个 OkHttpClient 作为 Picasso 和 Retrofit 的背景层 如何像 Volley 库中那样进行优先级更改 用于分页 简而言之 OkHttpClient okHttp

  • React Hangman 游戏：点击状态未正确管理，产生意外行为

    你好 我有 Letters js 它可以生成 a z 的可用字母 import React useState from react import AvailableLetter from AvailableLetter AvailableL

  • 如何跳过压缩一张 PNG？

    注意 我已经解决了这个问题 但花了很长时间才在这里发布问题 答案 Xcode 构建过程在构建时 优化 我的 PNG 这通常不是问题 但以这种方式处理的 iTunesArtwork 会导致其损坏 以致 iTunes 无法显示它 我怎样才能防止

  • 双击时将文件名传递给 Windows 批处理 (.bat) 脚本，以便它将以八度运行

    我是使用批处理脚本的新手 并且对八度音程有一定的经验 我有很多使用八度函数检查的数据文件 我正在尝试进行设置 以便我可以双击具有自定义扩展名的文件来直接打开八度函数 想想 当我双击这个文本文件时 它会在记事本中打开 为此 我写了一个非常基本

  • 创建前判断MySQL表索引是否存在

    我们系统的自动数据库迁移过程涉及运行包含新表定义及其附带索引的 sql 脚本 仅当这些表和索引尚不存在时 我才需要能够创建它们 表是通过使用 IF NOT EXISTS 来处理的 但创建索引时不存在这样的语法 我尝试编写一个存储过程 如下所

  • 在命名空间内的类中使用带有运算符重载的字符串流时，“与‘operator>>’不匹配”

    我试图在命名空间内的类中重载 gt gt 运算符 但是一旦我尝试将它与字符串流一起使用 它就不起作用 这是我的代码的精炼版本 include

  • 有没有办法合并 Kusto 中两个表的数据？

    详细了解如何在 Kusto 中编写查询 我在两个具有不同角色的表中有一列 但列标题是角色 我想将数据合并到一个名为 角色 的列中 我尝试添加这个 extends Roles strcat RoleName Role 但这只是组合了数据 这是

  • 如何告诉 pytest-xdist 按顺序从一个文件夹运行测试，并并行运行其余文件夹？

    想象一下我有test unit 可以安全地并行运行并且test functional 目前还不能并行运行 有没有一种简单的方法可以说服 pytest 运行functional依次 考虑到我们正在讨论大量的测试 因此改变每个测试函数 方法将会

  • Cassandra：如何将整个表移动到另一个键空间

    我的 Cassandra 的版本信息 cqlsh 5 0 1 卡桑德拉 2 2 5 CQL 规范 3 3 1 本机协议 v4 我正在尝试将一些巨大的表 几百万行 移动到另一个键空间 除了 COPY to csv and COPY from

  • 如何在 Android 上将 SurfaceView 与 main.xml 一起使用？

    在我的项目的主课中 我有 public class MyClass extends Activity public void onCreate Bundle savedInstanceState super onCreate savedIn

  • 如何在javascript中实现deque数据结构？

    我正在用 javascript 学习数据结构 我现在的重点是如何实现双端队列 编辑 从下面的评论中我得到了有关如何实施的有用指示deque based array 有没有一个具体实施的方向deque based object使用类 我明白了

  • Symfony 不会从集合中删除实体

    我知道一般来说有很多关于这个主题的帖子 不幸的是 这些大多涉及对数据库的实际持久操作 就我而言 我在持久操作之前发生了一个问题 我有一个带有实体 学说 持久性集合的表单 您可以通过 javascript 从 DOM 中删除 对象 提交后 当

  • Vim 关闭窗口而不关闭缓冲区

    如何在不删除缓冲区的情况下关闭窗口或取消分割 A window is a viewport on a buffer In vim to manage windows it is CTRL w the leading command that

  • Python：导入错误，没有名为 urllib 的模块

    我刚刚从Linode租了一个VPS 它有python2 5和ubuntu 8 04 当我运行这个命令时python shell import urllib I get ImportError No module named urllib 可

  • 杀死应用程序后，后台获取不起作用

    我正在尝试通过后台获取从 url 获取数据 我的函数尝试获取数据 如果有新数据 它会发送本地通知 当我最小化应用程序时 后台获取会在大约 10 20 分钟后开始工作 但是当我杀死该应用程序 双击主页按钮并关闭应用程序 时 它不起作用 我等了

  • 为什么正则表达式不能使用关键字而不是字符？

    好吧 我几乎不了解 RegEx 基础知识 但为什么他们不能将其设计为使用关键字 如 SQL 而不是一些神秘的通配符和符号呢 由于正则表达式是在运行时解释 解析的 所以是为了性能吗 未编译 或者也许是为了写作速度 考虑到当您学习一些 简单 字

  • 异步 lambda 到表达式>

    众所周知 我可以将普通的 lambda 表达式转换为Expression

  • 3D 数组如何在 C 中存储？

    据我所知 C 中的数组是按行优先顺序分配的 因此 对于 2 x 3 数组 0 1 2 3 4 5 存储在内存中为 0 1 2 3 4 5 但是 如果我有一个 2 x 3 x 2 数组怎么办 0 1 2 3 4 5 and 6 7 8 9 1

  • 从左到右显示 SVG 动画

    我有两个 SVG 图像 我想将它们设置为动画 如下所示 首先显示Full Screen文本从左到右 然后用第二个 SVG 覆盖该单词Screen显示整个第二个 SVG 因此 最后我将得到第二个 svg 中的单词 Full 黑色空间 以及单词

热门标签