我有两个 SVG 图像，我想按如下方式对它们进行动画处理，首先从左到右显示 全屏 文本，然后用第二个 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>
我对 SVG 非常陌生，我不知道如何:(
最佳答案
有很多选择如何做到这一点:
您可以使用纯 CSS 或使用 javascript(可能使用 svg.js 或 snap.svg 等库)
正确的选择取决于许多因素。
下面是一个(简化的)示例，灵感来自 this page ，使用 path 元素作为封面，使用 lines-dasharray 作为“长线单独空间”，并动画 lines-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>
关于html - 从左到右显示 SVG 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63579804/