Reveal SVG animation from left to right

问题

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>

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

回答1:

There are many options how to do it:

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

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

The correct one depends on many factors.

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>

来源：https://stackoverflow.com/questions/63579804/reveal-svg-animation-from-left-to-right

标签

html

css

svg