Edge 和 IE 上的动画 SVG（使用 CSS）是不是有解决方法？
Posted
技术标签:
【中文标题】Edge 和 IE 上的动画 SVG（使用 CSS）是不是有解决方法？【英文标题】：Is there a workaround for animated SVGs (using CSS) on Edge and IE?Edge 和 IE 上的动画 SVG（使用 CSS）是否有解决方法？ 【发布时间】：2020-05-31 17:57:59 【问题描述】：我有一个 SVG 动画，它不能在 Edge 上运行，显然不能在 IE 上运行。我已经对这个问题进行了广泛的研究，并且知道为 stroke-dashoffset 和 stroke-dasharray 使用像素以使其正常工作。我也做了同样的事情，但它不起作用。现在，据我所知，Edge 目前支持 SVG 动画；再一次，它不适合我。
我想知道是否有任何解决方法，例如在动画不工作时使用背景图像的方法？我搜索了很多，但无法找到相关主题。任何想法将不胜感激。
@-webkit-keyframes handwriting
to
stroke-dashoffset: 0px;
@-moz-keyframes handwriting
to
stroke-dashoffset: 0px;
@keyframes handwriting
to
stroke-dashoffset: 0px;
.svg-text
width: 23rem;
height: 100%;
margin-top: 1rem;
margin-bottom: -2rem;
fill: none;
stroke: #000;
stroke-miterlimit: 10;
stroke-width: 7px;
-webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
z-index: 100;
.svg-text__animate
stroke-dasharray: 300px;
stroke-dashoffset: 300px;
animation: handwriting 0.8s linear forwards;
.svg-text--container .svg-text__animate
opacity: 1;
.svg-text--container .svg-text__animate--1
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
.svg-text--container .svg-text__animate--2
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
.svg-text--container .svg-text__animate--3
-webkit-animation-delay: 1.3s;
animation-delay: 1.3s;
.svg-text--container .svg-text__animate--4
-webkit-animation-delay: 1.8s;
animation-delay: 1.8s;
.svg-text--container .svg-text__animate--5
-webkit-animation-delay: 2s;
animation-delay: 2s;
.svg-text--container .svg-text__animate--6
-webkit-animation-delay: 2.2s;
animation-delay: 2.2s;
.svg-text--container .svg-text__animate--7
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
.svg-text--container .svg-text__animate--8
-webkit-animation-delay: 2.6s;
animation-delay: 2.6s;
.svg-text--container .svg-text__animate--9
-webkit-animation-delay: 2.9s;
animation-delay: 2.9s;
.svg-text--container .svg-text__animate--10
-webkit-animation-delay: 3.3s;
animation-delay: 3.3s;
.svg-text--container .svg-text__animate--11
-webkit-animation-delay: 3.5s;
animation-delay: 3.5s;
.svg-text--container .svg-text__animate--12
-webkit-animation-delay: 3.7s;
animation-delay: 3.7s;
.svg-text--container .svg-text__animate--12
-webkit-animation-delay: 4s;
animation-delay: 4s;
.svg-text--container .svg-text__animate--13
-webkit-animation-delay: 4.3s;
animation-delay: 4.3s;
.svg-text--container .svg-text__animate--14
-webkit-animation-delay: 4.6s;
animation-delay: 4.6s;
<div class="banner__1__content--l2 svg-text--container">
<svg class="svg-text" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 410 94.376">
<defs>
<clipPath id="clip-path" transform="translate(-277.94 -292.292)">
<path id="h"
d="M310.345,298.912a.987.987,0,0,1,.457.774q0,.632-.809.632a1.542,1.542,0,0,1-.738-.211,6.2,6.2,0,0,0-2.426-.808q-2.145,0-4.781,4.289-9.282,15.117-13.746,39.586A60.811,60.811,0,0,1,301.415,325.6a4.584,4.584,0,0,1,2.32-1.407c.141,0,3.7,1.829,3.868,1.969a3.621,3.621,0,0,1,.914,2.813,11.783,11.783,0,0,1-.071,1.23,70.081,70.081,0,0,1-3.586,15.153q1.089-1.477,3.446-4.325a1.514,1.514,0,0,1,.949-.6q.387,0,.387.457a2.2,2.2,0,0,1-.457,1.195q-2.04,2.954-5.414,8.648-.282.563-1.372,2.954-.456,1.125-1.265,1.125a5.329,5.329,0,0,1-2.637-1.231q-.7-.492-.246-1.547,6.047-15.187,6.4-22.676.107-2.144-.6-2.144a4.88,4.88,0,0,0-1.934,1.195,40.078,40.078,0,0,0-6.644,7.735,65,65,0,0,0-8.051,14.941q-.774,2.181-1.442,2.18a5.593,5.593,0,0,1-2.355-1.442,2.49,2.49,0,0,1-.6-2.461q4.078-22.323,10.618-38.144,4.851-11.778,8.753-15.4a2.9,2.9,0,0,1,1.934-.914,4.6,4.6,0,0,1,2.5,1.125Q308.587,297.472,310.345,298.912Zm-6.61,25.277a4.527,4.527,0,0,1,3.868,1.969,3.621,3.621,0,0,1,.914,2.813"
style="fill: none" />
</clipPath>
<clipPath id="clip-path-2" transform="translate(-277.94 -292.292)">
<path id="u"
d="M339.208,327.986a72.646,72.646,0,0,0-7,20.391q.984-1.722,2.391-.395.175-.492.562-.492c.352,0,.527.223.527.668a1.166,1.166,0,0,1-.105.457,55.678,55.678,0,0,0-2.953,7.91q-.422,1.758-1.125,1.758a6.906,6.906,0,0,1-2.742-1.371q-1.09-.772-.739-2.742a86.79,86.79,0,0,1,3.551-13.324,125.245,125.245,0,0,1-11.391,16.277,2.631,2.631,0,0,1-2.214,1.16c-1.974-.283-4.746-1.933-4.746-3.34a5.425,5.425,0,0,1,.07-.843,56.461,56.461,0,0,1,3.656-16.7q-.6.563-1.793,1.653-.458.387-.7.211-.282-.212.1-.809a26.229,26.229,0,0,0,2.25-3.656,17.171,17.171,0,0,1,2.286-4.254,1.763,1.763,0,0,1,1.336-.774,6.131,6.131,0,0,1,2.777,1.125q.492.317.492.633l-.773,1.16q-1.76,2.673-3.727,9.422a45.669,45.669,0,0,0-2.18,11.918q0,1.512.633,1.512.563,0,1.828-1.3a83.886,83.886,0,0,0,7.84-10.9,93.906,93.906,0,0,0,5.485-9.211q1.581-3.586,2.566-4.219a2.1,2.1,0,0,1,1.125-.422,5.413,5.413,0,0,1,1.9.739q1.406.738,1.407,1.089c0,.071-.083.164-.246.282A1.082,1.082,0,0,0,339.208,327.986Z"
style="fill: none" />
</clipPath>
<clipPath id="clip-path-3" transform="translate(-277.94 -292.292)">
<path id="m"
d="M383.61,342.26q-2.286,3.41-6.82,12.023a2.861,2.861,0,0,1-.527.809,2.439,2.439,0,0,1-1.477-.176q-2.425-.738-2.426-1.406a3.182,3.182,0,0,1,.317-1.125,98.045,98.045,0,0,0,4.517-13.131,41.709,41.709,0,0,0,1.811-10.705q0-1.23-.879-1.231a2.381,2.381,0,0,0-1.406.668q-2.988,2.427-7.735,9.422a63.256,63.256,0,0,0-8.05,15.785,2.072,2.072,0,0,1-.422.95q-.211.105-1.02-.176a9.239,9.239,0,0,1-2.285-1.2,1.049,1.049,0,0,1-.527-.808q0-.071.527-1.371a60.039,60.039,0,0,0,4.6-22.324q0-1.089-.632-1.09a2.016,2.016,0,0,0-1.16.6q-3.764,3.165-8.368,10.9a71.915,71.915,0,0,0-6.609,13.851q-.562,1.653-1.16,1.653A7.321,7.321,0,0,1,341,352.6q-.562-.317-.563-.668c0-.258,2.825-6.75,4.043-11.742q2.074-8.544,1.793-12.411-.526.528-1.793,1.741t-1.9,1.845a1.257,1.257,0,0,1-.809.457q-.526,0-.527-.7a1.406,1.406,0,0,1,.387-.984,39.016,39.016,0,0,0,3.9-4.817q.7-.983,1.231-.984c.257,0,2.683,1.547,3.269,1.758a1.308,1.308,0,0,1,.738,1.3,2.742,2.742,0,0,1-.07.6A74.982,74.982,0,0,1,348,340.643q6.224-11.181,11.566-15.891a2.193,2.193,0,0,1,1.442-.668,19.064,19.064,0,0,1,4.148,2.074,3.038,3.038,0,0,1,.528,1.969,45.049,45.049,0,0,1-1.653,12.762q6.856-10.865,12.481-16.137a2.229,2.229,0,0,1,1.547-.7c.7,0,5.3,2.8,5.2,4.746a49.5,49.5,0,0,1-3.656,16.383,37.274,37.274,0,0,0,2.742-3.586,1.277,1.277,0,0,1,1.054-.738c.352,0,.528.188.528.562A1.649,1.649,0,0,1,383.61,342.26Z"
style="fill: none" />
</clipPath>
<clipPath id="clip-path-4" transform="translate(-277.94 -292.292)">
<path id="a"
d="M411.771,330.061a110.6,110.6,0,0,0-4.465,15.046,18.576,18.576,0,0,0,1.388-1.511,14.682,14.682,0,0,1,1.073-1.2,1.366,1.366,0,0,1,1.054-.632.466.466,0,0,1,.528.527,1.389,1.389,0,0,1-.282.738,28.5,28.5,0,0,0-4.394,9.879q-.317,1.406-.949,1.406a5.306,5.306,0,0,1-2.215-1.125,2.693,2.693,0,0,1-1.09-1.054,3.22,3.22,0,0,1,0-1.547,80.333,80.333,0,0,1,3.691-14.836,83.84,83.84,0,0,1-8.332,10.969,48.893,48.893,0,0,1-6.644,6.679,4.649,4.649,0,0,1-2.25,1.02,3.888,3.888,0,0,1-1.934-1.02,3.46,3.46,0,0,1-1.863-3.093,6.26,6.26,0,0,1,.07-.879q.633-5.2,4.571-12.112a48.7,48.7,0,0,1,9.035-11.654,4.469,4.469,0,0,1,2.953-1.512q1.266.072,4.816,3.34a.806.806,0,0,1,.317.6q0,.563-.739.562a1.326,1.326,0,0,1-.527-.105q-2.5-1.054-4.008.07-3.3,2.425-7.312,8.543-4.641,7.032-5.59,12.656a3.167,3.167,0,0,0-.035.457q0,.879.7.879a4.52,4.52,0,0,0,2.847-1.652,93.5,93.5,0,0,0,8.438-9.633,48.781,48.781,0,0,0,5.906-9.07q.95-2.25,1.231-3.164.456-1.582.984-1.582a6.82,6.82,0,0,1,2.461,1.441,1.926,1.926,0,0,1,.879,1.09A3.482,3.482,0,0,1,411.771,330.061Z"
style="fill: none" />
</clipPath>
<clipPath id="clip-path-5" transform="translate(-277.94 -292.292)">
<path id="n"
d="M441.97,340.959q-2.111,3.2-5.485,9.281-.633,1.582-1.23,3.164-.494,1.089-1.3,1.09a5.305,5.305,0,0,1-1.863-.527q-1.371-.562-1.371-1.125a3.338,3.338,0,0,1,.457-1.09,61.207,61.207,0,0,0,4.078-11.566q1.932-7.278,1.652-11.11-.07-1.547-.7-1.547-.458,0-1.371.879-8.859,8.649-15.328,23.133-.81,1.792-1.9,1.793a7.022,7.022,0,0,1-2.566-.879q-.7-.316-.738-.6a4.677,4.677,0,0,1,.386-.984,85.558,85.558,0,0,0,4.043-11.32,59.364,59.364,0,0,0,2.426-11.567q.071-1.264-.07-1.265-.036,0-.984.949t-2.637,2.461a.973.973,0,0,1-.7.316c-.329,0-.492-.128-.492-.386a.969.969,0,0,1,.351-.633q1.511-1.933,3.973-4.817a1.482,1.482,0,0,1,1.09-.6c.562,0,4.265,2.66,4.148,3.832q-.387,3.867-3.973,13.957a63.318,63.318,0,0,1,6.856-10.143q4.5-5.607,6.68-6.627a4.536,4.536,0,0,1,1.546-.492c.305,0,4.383,2.579,4.36,4.148a41.953,41.953,0,0,1-1.2,7.911q-.948,4.5-1.757,7,1.019-1.3,2.6-3.375a.765.765,0,0,1,.563-.352q.526,0,.527.668A1.324,1.324,0,0,1,441.97,340.959Z"
style="fill: none" />
</clipPath>
<clipPath id="clip-path-6" transform="translate(-277.94 -292.292)">
<path id="l"
d="M486.548,298.912a.967.967,0,0,1,.457.738q0,.669-.809.668a1.542,1.542,0,0,1-.738-.211,6.2,6.2,0,0,0-2.426-.808q-2.214,0-4.851,4.289-9.564,15.575-13.606,40.254-.1.668-.351,1.793.808-.844,2.39-2.742.915-1.089,1.336-1.09.915,0,.141,1.09a27.023,27.023,0,0,0-4.465,10.089q-.387,1.3-.984,1.3a1.438,1.438,0,0,1-.739-.316q-1.793-1.2-2.039-1.406a2.473,2.473,0,0,1-.7-1.829,6.6,6.6,0,0,1,.176-1.371q4.078-22.393,10.512-38.144,4.851-11.883,8.683-15.4a2.978,2.978,0,0,1,2.11-.949,4.835,4.835,0,0,1,2.461,1.195Q484.823,297.471,486.548,298.912Z"
style="fill: none" />
</clipPath>
<clipPath id="clip-path-7" transform="translate(-277.94 -292.292)">
<path id="a-2" data-name="a"
d="M496.673,330.061a110.6,110.6,0,0,0-4.465,15.046A18.552,18.552,0,0,0,493.6,343.6a14.556,14.556,0,0,1,1.072-1.2,1.367,1.367,0,0,1,1.055-.632.466.466,0,0,1,.527.527,1.394,1.394,0,0,1-.281.738,28.5,28.5,0,0,0-4.4,9.879q-.317,1.406-.949,1.406a5.311,5.311,0,0,1-2.215-1.125,2.7,2.7,0,0,1-1.09-1.054,3.246,3.246,0,0,1,0-1.547,80.326,80.326,0,0,1,3.692-14.836,83.929,83.929,0,0,1-8.332,10.969,48.94,48.94,0,0,1-6.645,6.679,4.646,4.646,0,0,1-2.25,1.02,3.883,3.883,0,0,1-1.933-1.02,3.459,3.459,0,0,1-1.864-3.093,6.273,6.273,0,0,1,.071-.879q.632-5.2,4.57-12.112a48.721,48.721,0,0,1,9.035-11.654,4.471,4.471,0,0,1,2.953-1.512q1.266.072,4.817,3.34a.8.8,0,0,1,.316.6q0,.563-.738.562a1.331,1.331,0,0,1-.528-.105q-2.5-1.054-4.007.07-3.306,2.425-7.313,8.543-4.641,7.032-5.59,12.656a3.317,3.317,0,0,0-.035.457q0,.879.7.879a4.52,4.52,0,0,0,2.848-1.652,93.5,93.5,0,0,0,8.437-9.633,48.8,48.8,0,0,0,5.907-9.07q.948-2.25,1.23-3.164.456-1.582.984-1.582a6.82,6.82,0,0,1,2.461,1.441,1.926,1.926,0,0,1,.879,1.09A3.466,3.466,0,0,1,496.673,330.061Z"
style="fill: none" />
</clipPath>
<clipPath id="clip-path-8" transform="translate(-277.94 -292.292)">
<path id="n-2" data-name="n"
d="M526.872,340.959q-2.109,3.2-5.484,9.281-.633,1.582-1.231,3.164-.492,1.089-1.3,1.09a5.311,5.311,0,0,1-1.863-.527q-1.371-.562-1.371-1.125a3.338,3.338,0,0,1,.457-1.09,61.137,61.137,0,0,0,4.078-11.566q1.933-7.278,1.653-11.11-.072-1.547-.7-1.547-.456,0-1.371.879-8.859,8.649-15.328,23.133-.808,1.792-1.9,1.793a7.025,7.025,0,0,1-2.567-.879q-.7-.316-.738-.6a4.712,4.712,0,0,1,.387-.984,85.7,85.7,0,0,0,4.043-11.32,59.439,59.439,0,0,0,2.426-11.567q.069-1.264-.071-1.265-.034,0-.984.949t-2.637,2.461a.973.973,0,0,1-.7.316c-.329,0-.492-.128-.492-.386a.969.969,0,0,1,.351-.633q1.512-1.933,3.973-4.817a1.483,1.483,0,0,1,1.09-.6c.562,0,4.266,2.66,4.148,3.832q-.387,3.867-3.972,13.957a63.371,63.371,0,0,1,6.855-10.143q4.5-5.607,6.68-6.627a4.533,4.533,0,0,1,1.547-.492c.3,0,4.382,2.579,4.359,4.148a42.015,42.015,0,0,1-1.195,7.911q-.95,4.5-1.758,7,1.02-1.3,2.6-3.375a.762.762,0,0,1,.562-.352c.352,0,.527.223.527.668A1.324,1.324,0,0,1,526.872,340.959Z"
style="fill: none" />
</clipPath>
<clipPath id="clip-path-9" transform="translate(-277.94 -292.292)">
<path id="g"
d="M555.138,328.619q-10.794,56-28.055,55.969-6.222,0-13.465-6.856a1.815,1.815,0,0,1-.668-1.3q0-1.022.949-1.02a1.457,1.457,0,0,1,.95.387q5.73,4.885,10.265,4.887,14.484,0,24.153-42.54-5.873,10.092-10.231,14.45a4.814,4.814,0,0,1-3.129,1.793,5.663,5.663,0,0,1-3.129-1.407,5.365,5.365,0,0,1-3.2-5.414q.212-4.605,3.551-11.425a35.329,35.329,0,0,1,6.82-10.02,5.634,5.634,0,0,1,3.621-1.9,4.6,4.6,0,0,1,2.637,1.054q.212.177,2.813,2.5a1.262,1.262,0,0,1,.527.914q0,.633-.844.633a2.842,2.842,0,0,1-1.195-.316,4.388,4.388,0,0,0-2.074-.563,3.937,3.937,0,0,0-2.672,1.055,27.76,27.76,0,0,0-5.379,7.313,31.314,31.314,0,0,0-3.762,10.125,15.3,15.3,0,0,0-.176,2.144q0,2.6,1.407,2.6a3.09,3.09,0,0,0,2-.95,42.8,42.8,0,0,0,8.3-10.371,51.635,51.635,0,0,0,5.45-11.5,11.638,11.638,0,0,0,.6-3.551q0-1.335.633-1.335a6.252,6.252,0,0,1,2.6,1.476Q555.594,326.334,555.138,328.619Z"
style="fill: none" />
</clipPath>
<clipPath id="clip-path-10" transform="translate(-277.94 -292.292)">
<path id="u-2" data-name="u"
d="M585.2,327.97a72.646,72.646,0,0,0-7,20.391q.984-1.722,2.391-4.395.175-.492.562-.492.528,0,.528.668a1.151,1.151,0,0,1-.106.457,55.678,55.678,0,0,0-2.953,7.91q-.421,1.758-1.125,1.758a6.913,6.913,0,0,1-2.742-1.371q-1.09-.773-.738-2.742a86.682,86.682,0,0,1,3.55-13.324,125.356,125.356,0,0,1-11.39,16.277,2.63,2.63,0,0,1-2.215,1.16c-1.974-.283-4.746-1.933-4.746-3.34a5.55,5.55,0,0,1,.07-.843,56.492,56.492,0,0,1,3.656-16.7q-.6.563-1.793,1.653-.456.387-.7.211-.282-.211.106-.809a26.439,26.439,0,0,0,2.25-3.656,17.14,17.14,0,0,1,2.285-4.254,1.763,1.763,0,0,1,1.336-.773,6.127,6.127,0,0,1,2.777,1.125q.492.315.492.632l-.773,1.161q-1.758,2.672-3.727,9.421a45.7,45.7,0,0,0-2.179,11.918q0,1.512.633,1.512.561,0,1.828-1.3a84,84,0,0,0,7.839-10.9,93.906,93.906,0,0,0,5.485-9.211q1.582-3.587,2.566-4.219a2.107,2.107,0,0,1,1.125-.422,5.423,5.423,0,0,1,1.9.739q1.405.738,1.406,1.089c0,.071-.083.164-.246.282A1.091,1.091,0,0,0,585.2,327.97Z"
style="fill: none" />
</clipPath>
<clipPath id="clip-path-11" transform="translate(-277.94 -292.292)">
<path id="a-3" data-name="a"
d="M611.458,330.061a110.6,110.6,0,0,0-4.465,15.046,18.552,18.552,0,0,0,1.389-1.511,14.556,14.556,0,0,1,1.072-1.2,1.367,1.367,0,0,1,1.055-.632.466.466,0,0,1,.527.527,1.394,1.394,0,0,1-.281.738,28.5,28.5,0,0,0-4.395,9.879q-.317,1.406-.949,1.406a5.311,5.311,0,0,1-2.215-1.125,2.7,2.7,0,0,1-1.09-1.054,3.246,3.246,0,0,1,0-1.547,80.326,80.326,0,0,1,3.692-14.836,83.929,83.929,0,0,1-8.332,10.969,48.94,48.94,0,0,1-6.645,6.679,4.646,4.646,0,0,1-2.25,1.02,3.883,3.883,0,0,1-1.933-1.02,3.461,3.461,0,0,1-1.864-3.093,6.273,6.273,0,0,1,.071-.879q.633-5.2,4.57-12.112a48.747,48.747,0,0,1,9.035-11.654,4.471,4.471,0,0,1,2.953-1.512q1.266.072,4.817,3.34a.8.8,0,0,1,.316.6q0,.563-.738.562a1.322,1.322,0,0,1-.527-.105q-2.5-1.054-4.008.07-3.3,2.425-7.313,8.543-4.641,7.032-5.59,12.656a3.317,3.317,0,0,0-.035.457q0,.879.7.879a4.52,4.52,0,0,0,2.848-1.652,93.5,93.5,0,0,0,8.437-9.633,48.747,48.747,0,0,0,5.907-9.07q.949-2.25,1.23-3.164.456-1.582.985-1.582a6.837,6.837,0,0,1,2.461,1.441,1.923,1.923,0,0,1,.878,1.09A3.466,3.466,0,0,1,611.458,330.061Z"
style="fill: none" />
</clipPath>
<clipPath id="clip-path-12" transform="translate(-277.94 -292.292)">
<path id="g-2" data-name="g"
d="M639.688,328.619q-10.792,56-28.054,55.969-6.224,0-13.465-6.856a1.815,1.815,0,0,1-.668-1.3q0-1.022.949-1.02a1.453,1.453,0,0,1,.949.387q5.731,4.885,10.266,4.887,14.484,0,24.152-42.54-5.871,10.092-10.23,14.45a4.814,4.814,0,0,1-3.129,1.793,5.66,5.66,0,0,1-3.129-1.407,5.365,5.365,0,0,1-3.2-5.414q.212-4.605,3.551-11.425a35.288,35.288,0,0,1,6.82-10.02,5.634,5.634,0,0,1,3.621-1.9,4.606,4.606,0,0,1,2.637,1.054q.21.177,2.812,2.5a1.26,1.26,0,0,1,.528.914q0,.633-.844.633a2.835,2.835,0,0,1-1.2-.316,4.392,4.392,0,0,0-2.075-.563,3.941,3.941,0,0,0-2.672,1.055,27.782,27.782,0,0,0-5.378,7.313,31.314,31.314,0,0,0-3.762,10.125A15.3,15.3,0,0,0,618,349.08q0,2.6,1.406,2.6a3.09,3.09,0,0,0,2-.95,42.819,42.819,0,0,0,8.3-10.371,51.627,51.627,0,0,0,5.449-11.5,11.61,11.61,0,0,0,.6-3.551q0-1.335.633-1.335a6.251,6.251,0,0,1,2.6,1.476Q640.146,326.334,639.688,328.619Z"
style="fill: none" />
</clipPath>
<clipPath id="clip-path-13" transform="translate(-277.94 -292.292)">
<path id="e"
d="M661.239,343.455c-5.7,7.29-9.713,11.147-12.023,10.934-4.216-.389-6.82-4.207-6.82-5.59a4.907,4.907,0,0,1,.07-.809,58.459,58.459,0,0,1,2.566-10.652q-1.3-.668-1.3-1.266,0-.492.739-.492a2.486,2.486,0,0,1,1.16.316q3.129-7.031,5.625-9.984,1.617-1.968,2.918-1.969a11.294,11.294,0,0,1,2.953,1.02q-.175-1.055.6-1.231c.023,0,3.164.176,3.164.528a4.41,4.41,0,0,1-.106.6,4.407,4.407,0,0,0-.105.914q0,1.266.035,3.129t.035,2.5q0,4.36-2.391,6.083a8.174,8.174,0,0,1-4.921,1.582,24.451,24.451,0,0,1-4.782-.774,19.5,19.5,0,0,0-1.336,4.254,27.565,27.565,0,0,0-.914,7.1q.036,1.827,1.16,1.828a3.818,3.818,0,0,0,1.09-.211q4.078-1.442,11.356-8.789a1.318,1.318,0,0,1,.914-.457q.668,0,.668.632A1.283,1.283,0,0,1,661.239,343.455Zm-4.113-15.539q0-1.371-.6-1.371a2.231,2.231,0,0,0-1.125.562q-3.446,2.778-6.047,9.739.7.105,2.461.211a5.481,5.481,0,0,0,4.254-1.3,5.122,5.122,0,0,0,1.16-3.481Q657.126,334.069,657.126,327.916Z"
style="fill: none" />
</clipPath>
<clipPath id="clip-path-14" transform="translate(-277.94 -292.292)">
<path id="s"
d="M675.056,345.494c-.056,4.506-7.137,8.695-8.192,8.789a9.977,9.977,0,0,1-2.179-.105q-2.074-.317-5.1-.774a1.169,1.169,0,0,1-1.02-1.019q.141-.949,1.969-1.125,2.5-.176,7.383-.879a3.619,3.619,0,0,0,2.6-2.074,4.319,4.319,0,0,0,.457-2.075q0-2.214-2.215-7.8-2.18-5.449-2.039-7.278.28-4.393,8.121-6.117.773-.176.773.563,0,.422-.562.668-3.8,1.653-3.8,4.078a10.268,10.268,0,0,0,.351,2.373q.353,1.424,2.11,6.838A20.474,20.474,0,0,1,675.056,345.494Zm5.625-20.18a24.454,24.454,0,0,1-.844,5.063,3.382,3.382,0,0,1-.7,1.547,4.249,4.249,0,0,1-1.2.527,6.928,6.928,0,0,1-1.617.492q-.527,0-.527-.7a4.926,4.926,0,0,1,.141-1.019,15.251,15.251,0,0,0,.65-4.834q-.194-1.353.791-1.7a7.129,7.129,0,0,1,2.215-.879Q680.68,323.8,680.681,325.314Z"
style="fill: none" />
</clipPath>
</defs>
<g id="h-grp">
<g style="clip-path: url(#clip-path)">
<polyline class="svg-text__animate svg-text__animate--1" id="h-path"
points="34.06 8.708 27.06 4.708 22.06 10.708 15.06 24.708 11.06 37.708 7.06 57.708 16.06 43.708 24.06 34.708 27.06 33.708 29.06 34.708 22.06 60.708 27.06 54.708 32.06 47.708" />
</g>
</g>
<g id="u-grp">
<g style="clip-path: url(#clip-path-2)">
<polyline class="svg-text__animate svg-text__animate--2" id="u-path"
points="36.06 43.708 39.06 39.708 42.06 34.708 44.06 35.708 41.06 42.708 40.06 46.708 38.06 55.708 38.06 58.708 38.06 59.708 40.06 60.708 43.06 57.708 53.06 43.708 58.06 34.708 60.06 35.708 57.06 42.708 55.06 48.708 52.06 60.708 53.06 60.708 58.06 50.708" />
</g>
</g>
<g id="m-grp">
<g style="clip-path: url(#clip-path-3)">
<polyline class="svg-text__animate svg-text__animate--3" id="m-path"
points="62.06 40.708 69.06 32.708 72.06 34.708 69.06 48.708 65.06 60.708 73.06 45.708 79.06 36.708 83.06 33.708 86.06 34.708 86.06 41.708 84.06 49.708 81.06 60.708 88.06 47.708 94.06 38.708 100.06 33.708 103.06 35.708 103.06 41.708 100.06 53.708 97.06 61.708 107.06 46.708" />
</g>
</g>
<g id="a-grp">
<g style="clip-path: url(#clip-path-4)">
<polyline class="svg-text__animate svg-text__animate--4" id="a-path"
points="129.06 36.708 124.06 32.708 118.06 38.708 111.06 49.708 108.06 58.708 111.06 60.708 116.06 56.708 127.06 43.708 131.06 35.708 133.06 36.708 128.06 52.708 127.06 60.708 130.06 53.708 134.06 48.708" />
</g>
</g>
<g id="n-grp">
<g style="clip-path: url(#clip-path-5)">
<polyline class="svg-text__animate svg-text__animate--5" id="n-path"
points="138.06 38.708 143.06 32.708 147.06 35.708 142.06 51.708 138.06 59.708 140.06 60.708 145.06 49.708 151.06 40.708 157.06 34.708 159.06 33.708 162.06 35.708 159.06 51.708 155.06 60.708 156.06 61.708 160.06 52.708 165.06 46.708" />
</g>
</g>
<g id="l-grp">
<g style="clip-path: url(#clip-path-6)">
<polyline class="svg-text__animate svg-text__animate--6" id="l-path"
points="210.06 8.708 203.06 4.708 193.06 20.708 183.06 58.708 184.06 60.708 187.06 54.708 191.06 47.708" />
</g>
</g>
<g id="a-grp-2" data-name="a-grp">
<g style="clip-path: url(#clip-path-7)">
<polyline class="svg-text__animate svg-text__animate--7" id="a-path-2" data-name="a-path"
points="213.963 36.708 208.963 32.708 202.963 38.708 195.963 49.708 192.963 58.708 195.963 60.708 200.963 56.708 211.963 43.708 215.963 35.708 217.963 36.708 212.963 52.708 211.963 60.708 214.963 53.708 218.963 48.708" />
</g>
</g>
<g id="n-grp-2" data-name="n-grp">
<g style="clip-path: url(#clip-path-8)">
<polyline class="svg-text__animate svg-text__animate--8" id="n-path-2" data-name="n-path"
points="222.963 38.708 227.963 32.708 231.963 35.708 226.963 51.708 222.963 59.708 224.963 60.708 229.963 49.708 235.963 40.708 241.963 34.708 243.963 33.708 246.963 35.708 243.963 51.708 239.963 60.708 240.963 61.708 244.963 52.708 249.963 46.708" />
</g>
</g>
<g id="g-grp">
<g style="clip-path: url(#clip-path-9)">
<polyline class="svg-text__animate svg-text__animate--9" id="g-path"
points="272.06 36.708 266.06 33.708 260.06 38.708 255.06 48.708 253.06 57.708 258.06 61.708 263.06 55.708 271.06 43.708 274.06 36.708 274.06 33.708 276.06 34.708 271.06 55.708 266.06 70.708 260.06 82.708 253.06 88.708 249.06 90.708 244.06 89.708 233.06 82.708" />
</g>
</g>
<g id="u-grp-2" data-name="u-grp">
<g style="clip-path: url(#clip-path-10)">
<polyline class="svg-text__animate svg-text__animate--10" id="u-path-2" data-name="u-path"
points="282.049 43.692 285.049 39.692 288.049 34.692 290.049 35.692 287.049 42.692 286.049 46.692 284.049 55.692 284.049 58.692 284.049 59.692 286.049 60.692 289.049 57.692 299.049 43.692 304.049 34.692 306.049 35.692 303.049 42.692 301.049 48.692 298.049 60.692 299.049 60.692 304.049 50.692" />
</g>
</g>
<g id="a-grp-3" data-name="a-grp">
<g style="clip-path: url(#clip-path-11)">
<polyline class="svg-text__animate svg-text__animate--11" id="a-path-3" data-name="a-path"
points="328.748 36.708 323.748 32.708 317.748 38.708 310.748 49.708 307.748 58.708 310.748 60.708 315.748 56.708 326.748 43.708 330.748 35.708 332.748 36.708 327.748 52.708 326.748 60.708 329.748 53.708 333.748 48.708" />
</g>
</g>
<g id="g-grp-2" data-name="g-grp">
<g style="clip-path: url(#clip-path-12)">
<polyline class="svg-text__animate svg-text__animate--12" id="g-path-2" data-name="g-path"
points="356.611 36.708 350.611 33.708 344.611 38.708 339.611 48.708 337.611 57.708 342.611 61.708 347.611 55.708 355.611 43.708 358.611 36.708 358.611 33.708 360.611 34.708 355.611 55.708 350.611 70.708 344.611 82.708 337.611 88.708 333.611 90.708 328.611 89.708 317.611 82.708" />
</g>
</g>
<g id="e-grp">
<g style="clip-path: url(#clip-path-13)">
<polyline class="svg-text__animate svg-text__animate--13" id="e-path"
points="364.06 42.708 372.06 45.708 377.06 45.708 381.06 43.708 382.06 39.708 382.06 32.708 380.06 32.708 380.06 33.708 376.06 32.708 372.06 38.708 368.06 47.708 366.06 56.708 367.06 58.708 370.06 60.708 373.06 60.708 385.06 48.708" />
</g>
</g>
<g id="s-path">
<g style="clip-path: url(#clip-path-14)">
<polyline class="svg-text__animate svg-text__animate--14" id="s-path-2" data-name="s-path"
points="400.06 41.708 401.06 32.708 396.06 33.708 391.06 36.708 395.06 51.708 395.06 54.708 391.06 59.708 387.06 60.708 379.06 59.708" />
</g>
</g>
</svg>
</div>【问题讨论】：
【参考方案1】：这个问题似乎是由于 IE 不支持SVG animation。
我认为最简单的解决方法是在 IE 中使用 gif。我制作了动画的 gif，并使用 this tool 将其循环计数为一次。结果 gif 为 like this。我们可以使用 IE 特定的 css 规则来显示 gif 并隐藏 IE 中的其他部分：
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
/* IE10+ CSS */
#gif-img
display:block;
.banner__1__content--l2 svg-text--container
display: none;
<div id="gif-img">
<img src="https://i.stack.imgur.com/jrK6Y.gif" />
</div>
<div class="banner__1__content--l2 svg-text--container">
...
</div>
在 Edge 中，我发现如果我们将 stroke-width 的值设置得足够大，动画就会起作用。但结果与 Chrome 和the New Edge Chromium 中的结果还是有点不同（您可以尝试更新到最新的 Edge Chromium 官方版本）：
@supports (-ms-ime-align: auto)
/* Edge 16+ CSS */
.svg-text
stroke-width: 700px;
【讨论】：
以上是关于Edge 和 IE 上的动画 SVG（使用 CSS）是不是有解决方法？的主要内容，如果未能解决你的问题，请参考以下文章
为啥这个 CSS3 动画在 MS Edge 或 IE11 中不起作用？
如何在 Edge 和 IE 中通过单击 SVG 形状来实现动画