如何在 svg 图像（徽标）上制作光扫（闪耀）动画？

Question

无法仅在 svg 徽标上设置光扫描徽标上出现光扫:hover它应该只在 svg 图像路径内.preloader {  position: fixed;  display: flex;  align-items: center;  justify-content: center;  width: 100%;  height: 100vh;  background: linear-gradient(119.5deg, #242524 1.62%, #5B5B5B 90.13%);}.logo {  display: none;}.sp {  overflow: hidden;  display: flex;  align-items: center;  justify-content: center;  width: 60%;  height: 70px;}.sp:after {  content: '';  width: 50px;  height: 900px;  position: absolute;  background-color: #ffffff45;  top: 0;  transition: all 1s ease-in-out;  transform: rotate(135deg) translate(400px, 400px);}.sp:hover:after {  transform: rotate(135deg) translate(-600px, -200px);}<div class="preloader">  <span class="sp">            <svg xmlns="http://www.w3.org/2000/svg" width="764" height="65" viewBox="0 0 764 65" fill="none">                <path                    fill="#D7B56D" />            </svg>        </span></div>

Answer 1

使用您在 SVG 中定义的渐变着色，然后使用 SMIL 对其进行动画处理（

.preloader {

  position: fixed;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 100vh;

  background: linear-gradient(119.5deg, #242524 1.62%, #5B5B5B 90.13%);

}

.logo {

  display: none;

}

.sp {

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 60%;

  height: 70px;

}

/* Make the gradient visible only on hover*/

linearGradient {

  display:none;

}

path {

  fill:#D7B56D;

}

svg:hover linearGradient {

  display:initial;

}

svg:hover path {

  fill:url(#linear-gradient);

}

/**/

<div class="preloader">

  <span class="sp">

            <svg xmlns="http://www.w3.org/2000/svg" width="764" height="65" viewBox="0 0 764 65" fill="none" id="svg-text">

            <defs>

        <linearGradient id="linear-gradient" x1="-100%" y1="100%" x2="800%" y2="0" >

            <stop offset="0" stop-color="#D7B56D">

               <animate attributeName="offset" values="0;0.8" dur="2s" repeatCount="indefinite"  /> 

            </stop>

            <stop offset="0" stop-color="rgba(255, 255, 255, 0.3)">

               <animate attributeName="offset" values="0;0.8" dur="2s" repeatCount="indefinite"  /> 

            </stop>

            <stop offset="0.1" stop-color="rgba(255, 255, 255, 0.3)">

                <animate attributeName="offset" values="0.1;1" dur="2s" repeatCount="indefinite"  /> 

            </stop>

            <stop offset="0.1" stop-color="#D7B56D">

                <animate attributeName="offset" values="0.1;1" dur="2s" repeatCount="indefinite"  /> 

            </stop>

        </linearGradient>

    </defs> 

                <path

                    d="M21.1662 3.6928C32.3348 3.6928 36.8384 15.5809 36.8384 15.5809H37.9191C37.9191 15.5809 42.6929 11.7984 42.6929 5.58383C42.6929 5.58383 36.9283 0 22.8776 0C8.55619 0 1.35087 5.67423 1.35087 15.8511C1.35087 25.127 7.20536 29.09 19.4547 35.6645C29.5426 41.1578 36.5677 44.5804 36.5677 51.1544C36.5677 57.0083 31.2541 60.791 23.8684 60.791C12.2493 60.791 6.03421 47.8222 6.03421 47.8222H4.86366C4.86366 47.8222 0 51.4251 0 57.6391C0 57.6391 6.30439 64.4837 22.6973 64.4837C38.3696 64.4837 45.4845 58.1794 45.4845 48.1828C45.4845 39.8071 40.3506 36.7451 26.4803 28.1891C13.5103 20.4442 9.90766 18.2824 9.90766 12.6986C9.90766 7.2951 13.4199 3.6928 21.1662 3.6928V3.6928ZM65.6604 45.8414H96.0135L103.49 63.7631H113.667L87.1872 0.720602H76.3786V1.62149C76.3786 1.62149 76.9189 2.43191 77.8199 4.05278L52.9606 63.7631H58.2748L65.6604 45.8414V45.8414ZM83.7642 16.4812L94.2122 41.5184H67.4617L80.612 9.5467C81.5124 11.4377 82.5937 13.7798 83.7642 16.4812ZM136.004 62.2321L137.535 63.7631H144.561L169.87 0.720602H164.646L143.3 54.3967L120.963 0.720602H109.704V1.62149C109.704 1.62149 112.586 6.03425 116.91 16.4812L136.004 62.2321ZM180.679 63.7631H205.537C224.362 63.7631 237.152 50.9747 237.152 32.2419C237.152 13.5091 224.362 0.720602 205.537 0.720602H180.679V63.7631ZM205.088 5.04351C217.697 5.04351 226.254 15.0401 226.254 32.2419C226.254 49.4437 217.697 59.4402 205.088 59.4402H190.496V5.04351H205.088ZM247.78 32.2419C247.78 51.4251 260.57 64.4837 279.394 64.4837C298.218 64.4837 311.099 51.4251 311.099 32.2419C311.099 13.0592 298.218 0 279.394 0C260.57 0 247.78 13.0592 247.78 32.2419ZM258.678 32.2419C258.678 14.1398 267.055 3.6928 279.394 3.6928C291.734 3.6928 300.11 14.1398 300.11 32.2419C300.11 50.344 291.734 60.791 279.394 60.791C267.055 60.791 258.678 50.344 258.678 32.2419ZM359.556 37.3752L360.186 38.0958H368.112C368.563 40.5277 369.013 44.13 369.013 49.2634V56.3782C365.5 57.9991 360.997 59.3503 355.683 59.3503C341.092 59.3503 332.625 48.7231 332.625 31.2511C332.625 14.0499 340.822 3.6928 354.152 3.6928C362.798 3.6928 368.293 7.8354 368.293 16.5717C368.293 20.534 367.302 22.1549 367.302 22.1549L368.203 23.0557C373.607 23.0557 376.849 22.1549 376.849 22.1549C376.849 22.1549 377.93 20.8042 377.93 17.2018C377.93 6.57456 368.833 0 354.332 0C333.976 0 321.727 13.0592 321.727 32.152C321.727 51.4251 334.157 64.4837 353.972 64.4837C370.544 64.4837 378.02 55.2976 378.02 55.2976V33.7729L377.12 32.8726C377.12 32.8726 373.787 33.7729 368.022 33.7729H359.556V37.3752ZM399.277 45.8414H429.63L437.106 63.7631H447.284L420.803 0.720602H409.995V1.62149C409.995 1.62149 410.535 2.43191 411.436 4.05278L386.577 63.7631H391.891L399.277 45.8414V45.8414ZM417.38 16.4812L427.828 41.5184H401.078L414.228 9.5467C415.129 11.4377 416.21 13.7798 417.38 16.4812V16.4812ZM458.182 63.7631H467.999V35.7543H478.988L495.381 63.7631H506.189L506.729 63.133C506.729 63.133 502.496 58.3597 496.371 48.0025L488.625 34.6738C497.542 32.4222 502.947 26.7486 502.947 18.2824C502.947 7.11485 493.669 0.720602 479.168 0.720602H458.182V63.7631V63.7631ZM477.637 5.04351C486.824 5.04351 492.678 9.72705 492.678 18.2824C492.678 26.7486 486.824 31.4314 477.637 31.4314H467.999V5.04351H477.637ZM518.528 63.7631H543.567C558.699 63.7631 566.805 57.8194 566.805 47.0118C566.805 38.366 561.581 32.7822 551.764 30.8912C559.6 28.7294 563.563 23.6859 563.563 16.3914C563.563 6.48469 556.267 0.720602 541.676 0.720602H518.528V63.7631V63.7631ZM556.537 46.3816C556.537 54.7573 551.223 59.4402 542.036 59.4402H528.346V33.3225H542.036C551.223 33.3225 556.537 37.9155 556.537 46.3816ZM553.565 17.0215C553.565 24.4969 548.882 28.9996 540.145 28.9996H528.346V5.04351H540.145C548.882 5.04351 553.565 9.45685 553.565 17.0215V17.0215ZM585.99 45.8414H616.343L623.819 63.7631H633.997L607.517 0.720602H596.708V1.62149C596.708 1.62149 597.249 2.43191 598.15 4.05278L573.29 63.7631H578.604L585.99 45.8414V45.8414ZM604.094 16.4812L614.542 41.5184H587.792L600.942 9.5467C601.842 11.4377 602.923 13.7798 604.094 16.4812V16.4812ZM644.896 63.7631H649.669V16.6615L693.353 63.7631H696.325V0.720602H691.191V48.0025L647.508 0.720602H643.905L643.094 1.62149C643.094 1.62149 644.896 9.72703 644.896 25.9375V63.7631V63.7631ZM713.438 63.7631H723.255V32.8726H727.308L751.267 63.7631H763.156V62.8623C763.156 62.8623 756.491 56.468 748.295 45.8414L734.874 27.5589L758.743 0.720602H752.438L727.669 28.5497H723.255V0.720602H713.438V63.7631V63.7631Z"

                    fill="url(#linear-gradient)" />

            </svg>

        </span>

</div>

Answer 2

添加 position: relative;和删除height类.sp。还删除了高度svg

.preloader {

  position: fixed;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 100vh;

  background: linear-gradient(119.5deg, #242524 1.62%, #5B5B5B 90.13%);

}

.logo {

  display: none;

}

.sp {

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 60%;

  

  position: relative;

}

.sp:after {

  content: '';

  width: 50px;

  height: 900px;

  position: absolute;

  background-color: #ffffff45;

  top: 0;

  transition: all 1s ease-in-out;

  transform: rotate(135deg) translate(400px, 400px);

}

.sp:hover:after {

  transform: rotate(135deg) translate(-600px, -200px);

}

<div class="preloader">

  <span class="sp">

            <svg xmlns="http://www.w3.org/2000/svg" width="764" viewBox="0 0 764 65" fill="none">

                <path

                    d="M21.1662 3.6928C32.3348 3.6928 36.8384 15.5809 36.8384 15.5809H37.9191C37.9191 15.5809 42.6929 11.7984 42.6929 5.58383C42.6929 5.58383 36.9283 0 22.8776 0C8.55619 0 1.35087 5.67423 1.35087 15.8511C1.35087 25.127 7.20536 29.09 19.4547 35.6645C29.5426 41.1578 36.5677 44.5804 36.5677 51.1544C36.5677 57.0083 31.2541 60.791 23.8684 60.791C12.2493 60.791 6.03421 47.8222 6.03421 47.8222H4.86366C4.86366 47.8222 0 51.4251 0 57.6391C0 57.6391 6.30439 64.4837 22.6973 64.4837C38.3696 64.4837 45.4845 58.1794 45.4845 48.1828C45.4845 39.8071 40.3506 36.7451 26.4803 28.1891C13.5103 20.4442 9.90766 18.2824 9.90766 12.6986C9.90766 7.2951 13.4199 3.6928 21.1662 3.6928V3.6928ZM65.6604 45.8414H96.0135L103.49 63.7631H113.667L87.1872 0.720602H76.3786V1.62149C76.3786 1.62149 76.9189 2.43191 77.8199 4.05278L52.9606 63.7631H58.2748L65.6604 45.8414V45.8414ZM83.7642 16.4812L94.2122 41.5184H67.4617L80.612 9.5467C81.5124 11.4377 82.5937 13.7798 83.7642 16.4812ZM136.004 62.2321L137.535 63.7631H144.561L169.87 0.720602H164.646L143.3 54.3967L120.963 0.720602H109.704V1.62149C109.704 1.62149 112.586 6.03425 116.91 16.4812L136.004 62.2321ZM180.679 63.7631H205.537C224.362 63.7631 237.152 50.9747 237.152 32.2419C237.152 13.5091 224.362 0.720602 205.537 0.720602H180.679V63.7631ZM205.088 5.04351C217.697 5.04351 226.254 15.0401 226.254 32.2419C226.254 49.4437 217.697 59.4402 205.088 59.4402H190.496V5.04351H205.088ZM247.78 32.2419C247.78 51.4251 260.57 64.4837 279.394 64.4837C298.218 64.4837 311.099 51.4251 311.099 32.2419C311.099 13.0592 298.218 0 279.394 0C260.57 0 247.78 13.0592 247.78 32.2419ZM258.678 32.2419C258.678 14.1398 267.055 3.6928 279.394 3.6928C291.734 3.6928 300.11 14.1398 300.11 32.2419C300.11 50.344 291.734 60.791 279.394 60.791C267.055 60.791 258.678 50.344 258.678 32.2419ZM359.556 37.3752L360.186 38.0958H368.112C368.563 40.5277 369.013 44.13 369.013 49.2634V56.3782C365.5 57.9991 360.997 59.3503 355.683 59.3503C341.092 59.3503 332.625 48.7231 332.625 31.2511C332.625 14.0499 340.822 3.6928 354.152 3.6928C362.798 3.6928 368.293 7.8354 368.293 16.5717C368.293 20.534 367.302 22.1549 367.302 22.1549L368.203 23.0557C373.607 23.0557 376.849 22.1549 376.849 22.1549C376.849 22.1549 377.93 20.8042 377.93 17.2018C377.93 6.57456 368.833 0 354.332 0C333.976 0 321.727 13.0592 321.727 32.152C321.727 51.4251 334.157 64.4837 353.972 64.4837C370.544 64.4837 378.02 55.2976 378.02 55.2976V33.7729L377.12 32.8726C377.12 32.8726 373.787 33.7729 368.022 33.7729H359.556V37.3752ZM399.277 45.8414H429.63L437.106 63.7631H447.284L420.803 0.720602H409.995V1.62149C409.995 1.62149 410.535 2.43191 411.436 4.05278L386.577 63.7631H391.891L399.277 45.8414V45.8414ZM417.38 16.4812L427.828 41.5184H401.078L414.228 9.5467C415.129 11.4377 416.21 13.7798 417.38 16.4812V16.4812ZM458.182 63.7631H467.999V35.7543H478.988L495.381 63.7631H506.189L506.729 63.133C506.729 63.133 502.496 58.3597 496.371 48.0025L488.625 34.6738C497.542 32.4222 502.947 26.7486 502.947 18.2824C502.947 7.11485 493.669 0.720602 479.168 0.720602H458.182V63.7631V63.7631ZM477.637 5.04351C486.824 5.04351 492.678 9.72705 492.678 18.2824C492.678 26.7486 486.824 31.4314 477.637 31.4314H467.999V5.04351H477.637ZM518.528 63.7631H543.567C558.699 63.7631 566.805 57.8194 566.805 47.0118C566.805 38.366 561.581 32.7822 551.764 30.8912C559.6 28.7294 563.563 23.6859 563.563 16.3914C563.563 6.48469 556.267 0.720602 541.676 0.720602H518.528V63.7631V63.7631ZM556.537 46.3816C556.537 54.7573 551.223 59.4402 542.036 59.4402H528.346V33.3225H542.036C551.223 33.3225 556.537 37.9155 556.537 46.3816ZM553.565 17.0215C553.565 24.4969 548.882 28.9996 540.145 28.9996H528.346V5.04351H540.145C548.882 5.04351 553.565 9.45685 553.565 17.0215V17.0215ZM585.99 45.8414H616.343L623.819 63.7631H633.997L607.517 0.720602H596.708V1.62149C596.708 1.62149 597.249 2.43191 598.15 4.05278L573.29 63.7631H578.604L585.99 45.8414V45.8414ZM604.094 16.4812L614.542 41.5184H587.792L600.942 9.5467C601.842 11.4377 602.923 13.7798 604.094 16.4812V16.4812ZM644.896 63.7631H649.669V16.6615L693.353 63.7631H696.325V0.720602H691.191V48.0025L647.508 0.720602H643.905L643.094 1.62149C643.094 1.62149 644.896 9.72703 644.896 25.9375V63.7631V63.7631ZM713.438 63.7631H723.255V32.8726H727.308L751.267 63.7631H763.156V62.8623C763.156 62.8623 756.491 56.468 748.295 45.8414L734.874 27.5589L758.743 0.720602H752.438L727.669 28.5497H723.255V0.720602H713.438V63.7631V63.7631Z"

                    fill="#D7B56D" />

            </svg>

        </span>

</div>