从左到右显示 SVG 动画 [英] Reveal SVG animation from left to right

问题描述

我有两个 SVG 图像，我想按如下方式对它们进行动画处理，首先从左到右显示 Full Screen 文本，然后用第二个 SVG 覆盖单词 Screen 显示整个第二个 SVG.因此，最后我将使用Full"这个词.第二个 svg 中的黑色空间，以及大小视图"

I ve got two SVG images and I would like to animate them as following, first to reveal the Full Screen text from left to right, and after to cover with the second SVG the word Screen revealing the whole second SVG. Hence in the end I will have the word "Full" black space from second svg, and the words "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>

我是 SVG 的新手，我不知道怎么做 :(

I am relly new to SVG and I've got no clue how :(

推荐答案

有很多方法可以做到:

• 使用剪辑并为剪辑制作动画
• 使用遮罩 并为遮罩制作动画
• 直接动画封面(下面使用stroke-dashoffset)
• ... ?

• use clipping and animate the clip
• use masking and animate the mask
• animate directly the cover (below using stroke-dashoffset)
• ... ?

您可以使用纯 CSS 或 javascript(可能使用 svg.js 或 snap.svg)

You can use plain CSS or use javascript (possibly with libraries like svg.js or snap.svg)

正确的选择取决于许多因素.

The correct one depends on many factors.

下面是一个(简化的)示例，其灵感来自 此页面，使用 path 元素作为封面，stroke-dasharray 作为long line lone space"，并动画 stroke-dashoffset 以获得所需的结果:

Below an (simlified) example, inspired by this page, using path element as a cover, stroke-dasharray as "long line lone space", and animating stroke-dashoffset to get desired result:

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

这篇关于从左到右显示 SVG 动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！