html - 如何修复 svg 路径中​​的线性渐变填充我无法使其过渡

Question

我用 Figma 制作了一个 svg 字符串。我从 svg 中删除了一个填充，因为我想给填充添加一个线性渐变。当我用 css 添加填充时，它突然显示没有任何过渡

这是我的路径:

<svg id="intro-svg" viewBox="0 0 624 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <defs>
                                        <linearGradient id="svgGradient" x1="0%" y1="0%" x2="50%" y2="100%">
                                            <stop offset="0%" stop-color="#3483a8"/>
                                            <stop offset="100%" stop-color="#e250eb" />
                                        </linearGradient>
                                    </defs>

                                    <path d="M31.8813 35.9395H12.521L8.17285 48H1.88867L19.5352 1.78906H24.8672L42.5454 48H36.293L31.8813 35.9395ZM14.3618 30.9248H30.0723L22.2012 9.31104L14.3618 30.9248Z" stroke="url(#paint0_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
                                    <path d="M74.7144 29.3062H63.8599V48H57.7344V1.78906H73.0322C78.2373 1.78906 82.2363 2.97396 85.0293 5.34375C87.8434 7.71354 89.2505 11.1624 89.2505 15.6904C89.2505 18.568 88.4676 21.0754 86.9019 23.2124C85.3573 25.3494 83.1991 26.9469 80.4272 28.0049L91.2817 47.6191V48H84.7437L74.7144 29.3062ZM63.8599 24.3232H73.2227C76.2484 24.3232 78.6499 23.5404 80.4272 21.9746C82.2257 20.4089 83.125 18.3141 83.125 15.6904C83.125 12.834 82.2681 10.644 80.5542 9.12061C78.8615 7.59717 76.4071 6.82487 73.1909 6.80371H63.8599V24.3232Z" stroke="url(#paint1_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
                                    <path d="M132.94 26.6401H112.914V43.0171H136.178V48H106.82V1.78906H135.86V6.80371H112.914V21.6572H132.94V26.6401Z" stroke="url(#paint2_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
                                    <path d="M191.978 24.9897L204.039 1.78906H210.958L195.025 30.7661V48H188.931V30.7661L172.999 1.78906H179.981L191.978 24.9897Z" stroke="url(#paint3_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
                                    <path d="M260.519 26.3862C260.519 30.9142 259.757 34.8709 258.234 38.2563C256.71 41.6206 254.552 44.1914 251.759 45.9688C248.966 47.7461 245.708 48.6348 241.984 48.6348C238.345 48.6348 235.118 47.7461 232.304 45.9688C229.49 44.1702 227.3 41.6206 225.734 38.3198C224.189 34.9979 223.396 31.1576 223.354 26.7988V23.4663C223.354 19.0229 224.126 15.098 225.67 11.6914C227.215 8.28483 229.394 5.68229 232.208 3.88379C235.044 2.06413 238.281 1.1543 241.92 1.1543C245.623 1.1543 248.882 2.05355 251.696 3.85205C254.531 5.62939 256.71 8.22135 258.234 11.6279C259.757 15.0133 260.519 18.9595 260.519 23.4663V26.3862ZM254.457 23.4028C254.457 17.9227 253.357 13.7227 251.156 10.8027C248.956 7.86165 245.877 6.39111 241.92 6.39111C238.069 6.39111 235.033 7.86165 232.812 10.8027C230.611 13.7227 229.479 17.7852 229.416 22.9902V26.3862C229.416 31.6971 230.526 35.876 232.748 38.9229C234.991 41.9486 238.069 43.4614 241.984 43.4614C245.919 43.4614 248.966 42.0332 251.125 39.1768C253.283 36.2992 254.394 32.1838 254.457 26.8306V23.4028Z" stroke="url(#paint4_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
                                    <path d="M311.191 1.78906V33.21C311.17 37.5687 309.795 41.134 307.065 43.9058C304.357 46.6776 300.675 48.2327 296.021 48.5713L294.402 48.6348C289.345 48.6348 285.314 47.27 282.31 44.5405C279.305 41.811 277.782 38.0553 277.739 33.2734V1.78906H283.77V33.083C283.77 36.4261 284.69 39.0286 286.531 40.8906C288.372 42.7314 290.995 43.6519 294.402 43.6519C297.851 43.6519 300.485 42.7314 302.305 40.8906C304.146 39.0498 305.066 36.4578 305.066 33.1147V1.78906H311.191Z" stroke="url(#paint5_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
                                    <path d="M371.879 29.3062H361.025V48H354.899V1.78906H370.197C375.402 1.78906 379.401 2.97396 382.194 5.34375C385.008 7.71354 386.416 11.1624 386.416 15.6904C386.416 18.568 385.633 21.0754 384.067 23.2124C382.522 25.3494 380.364 26.9469 377.592 28.0049L388.447 47.6191V48H381.909L371.879 29.3062ZM361.025 24.3232H370.388C373.413 24.3232 375.815 23.5404 377.592 21.9746C379.391 20.4089 380.29 18.3141 380.29 15.6904C380.29 12.834 379.433 10.644 377.719 9.12061C376.027 7.59717 373.572 6.82487 370.356 6.80371H361.025V24.3232Z" stroke="url(#paint6_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
                                    <path d="M430.105 26.6401H410.079V43.0171H433.343V48H403.985V1.78906H433.025V6.80371H410.079V21.6572H430.105V26.6401Z" stroke="url(#paint7_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
                                    <path d="M475.446 35.9395H456.085L451.737 48H445.453L463.1 1.78906H468.432L486.11 48H479.857L475.446 35.9395ZM457.926 30.9248H473.637L465.766 9.31104L457.926 30.9248Z" stroke="url(#paint8_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
                                    <path d="M501.331 48V1.78906H514.375C518.395 1.78906 521.95 2.67773 525.039 4.45508C528.128 6.23242 530.509 8.76091 532.18 12.0405C533.873 15.3201 534.73 19.0864 534.751 23.3394V26.291C534.751 30.6497 533.905 34.4689 532.212 37.7485C530.54 41.0282 528.139 43.5461 525.007 45.3022C521.897 47.0584 518.268 47.9577 514.121 48H501.331ZM507.424 6.80371V43.0171H513.835C518.533 43.0171 522.183 41.5571 524.785 38.6372C527.409 35.7173 528.721 31.5596 528.721 26.1641V23.4663C528.721 18.2189 527.483 14.1458 525.007 11.2471C522.553 8.32715 519.062 6.84603 514.534 6.80371H507.424Z" stroke="url(#paint9_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
                                    <path d="M565.682 24.9897L577.743 1.78906H584.662L568.729 30.7661V48H562.635V30.7661L546.703 1.78906H553.685L565.682 24.9897Z" stroke="url(#paint10_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>
                                    <path d="M605.595 34.9873C605.638 32.4694 605.923 30.4805 606.452 29.0205C606.981 27.5605 608.06 25.9419 609.689 24.1646L613.847 19.8799C615.625 17.8698 616.513 15.7116 616.513 13.4053C616.513 11.1836 615.931 9.44857 614.768 8.2002C613.604 6.93066 611.911 6.2959 609.689 6.2959C607.531 6.2959 605.796 6.86719 604.484 8.00977C603.173 9.15234 602.517 10.6864 602.517 12.6118H596.645C596.687 9.18408 597.904 6.42285 600.295 4.32812C602.707 2.21224 605.839 1.1543 609.689 1.1543C613.688 1.1543 616.799 2.2334 619.021 4.3916C621.263 6.52865 622.385 9.46973 622.385 13.2148C622.385 16.9176 620.671 20.5675 617.243 24.1646L613.784 27.5923C612.239 29.3062 611.467 31.7712 611.467 34.9873H605.595ZM605.341 45.0483C605.341 44.0962 605.627 43.3027 606.198 42.668C606.791 42.012 607.658 41.6841 608.801 41.6841C609.943 41.6841 610.811 42.012 611.403 42.668C611.996 43.3027 612.292 44.0962 612.292 45.0483C612.292 46.0005 611.996 46.7939 611.403 47.4287C610.811 48.0423 609.943 48.3491 608.801 48.3491C607.658 48.3491 606.791 48.0423 606.198 47.4287C605.627 46.7939 605.341 46.0005 605.341 45.0483Z" stroke="url(#paint11_linear)" stroke-width="2" mask="url(#path-1-outside-1)"/>


                                    <defs>
                                        <linearGradient id="paint0_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
                                            <stop stop-color="#3483A8"/>
                                            <stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
                                        </linearGradient>
                                        <linearGradient id="paint1_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
                                            <stop stop-color="#3483A8"/>
                                            <stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
                                        </linearGradient>
                                        <linearGradient id="paint2_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
                                            <stop stop-color="#3483A8"/>
                                            <stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
                                        </linearGradient>
                                        <linearGradient id="paint3_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
                                            <stop stop-color="#3483A8"/>
                                            <stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
                                        </linearGradient>
                                        <linearGradient id="paint4_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
                                            <stop stop-color="#3483A8"/>
                                            <stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
                                        </linearGradient>
                                        <linearGradient id="paint5_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
                                            <stop stop-color="#3483A8"/>
                                            <stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
                                        </linearGradient>
                                        <linearGradient id="paint6_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
                                            <stop stop-color="#3483A8"/>
                                            <stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
                                        </linearGradient>
                                        <linearGradient id="paint7_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
                                            <stop stop-color="#3483A8"/>
                                            <stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
                                        </linearGradient>
                                        <linearGradient id="paint8_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
                                            <stop stop-color="#3483A8"/>
                                            <stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
                                        </linearGradient>
                                        <linearGradient id="paint9_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
                                            <stop stop-color="#3483A8"/>
                                            <stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
                                        </linearGradient>
                                        <linearGradient id="paint10_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
                                            <stop stop-color="#3483A8"/>
                                            <stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
                                        </linearGradient>
                                        <linearGradient id="paint11_linear" x1="312.137" y1="-11.8457" x2="312" y2="74" gradientUnits="userSpaceOnUse">
                                            <stop stop-color="#3483A8"/>
                                            <stop offset="1" stop-color="#E250EB" stop-opacity="0"/>
                                        </linearGradient>
                                    </defs>
                                </svg>

当我尝试用线性渐变填充路径时，填充突然出现，我想用过渡来显示它:

#intro-svg {
    max-width: 678px;
    animation: fill 2s ease forwards;
}
@keyframes fill {
    from {
        fill: transparent;
    }
    to {
        fill: url(#svgGradient);
    }
}

Answer 1

我已通过仅使用一种渐变简化了您的代码。此外，我已将 attributeName 更改为 "stop-color" 。

在您的代码中，您使用了掩码，但由于代码中没有 <mask>，我删除了所有属性 mask。

希望对你有帮助。

<svg id="intro-svg" viewBox="0 0 624 50" fill="none" xmlns="http://www.w3.org/2000/svg">
   <defs>
      <linearGradient id="svgGradient" x1="0%" y1="0%" x2="50%" y2="100%">
         <stop offset="0%" stop-color="#3483a8">
         <animate attributeName="stop-color" values="#3483a8;#e250eb;#3483a8;" dur="1s" repeatCount="indefinite"></animate>
         </stop>
         <stop offset="100%" stop-color="#e250eb" />
    </linearGradient>
    </defs>

    <path d="M31.8813 35.9395H12.521L8.17285 48H1.88867L19.5352 1.78906H24.8672L42.5454 48H36.293L31.8813 35.9395ZM14.3618 30.9248H30.0723L22.2012 9.31104L14.3618 30.9248Z" stroke="url(#svgGradient)" stroke-width="2" />
    <path d="M74.7144 29.3062H63.8599V48H57.7344V1.78906H73.0322C78.2373 1.78906 82.2363 2.97396 85.0293 5.34375C87.8434 7.71354 89.2505 11.1624 89.2505 15.6904C89.2505 18.568 88.4676 21.0754 86.9019 23.2124C85.3573 25.3494 83.1991 26.9469 80.4272 28.0049L91.2817 47.6191V48H84.7437L74.7144 29.3062ZM63.8599 24.3232H73.2227C76.2484 24.3232 78.6499 23.5404 80.4272 21.9746C82.2257 20.4089 83.125 18.3141 83.125 15.6904C83.125 12.834 82.2681 10.644 80.5542 9.12061C78.8615 7.59717 76.4071 6.82487 73.1909 6.80371H63.8599V24.3232Z" stroke="url(#svgGradient)" stroke-width="2" />
    <path d="M132.94 26.6401H112.914V43.0171H136.178V48H106.82V1.78906H135.86V6.80371H112.914V21.6572H132.94V26.6401Z" stroke="url(#svgGradient)" stroke-width="2" />
    <path d="M191.978 24.9897L204.039 1.78906H210.958L195.025 30.7661V48H188.931V30.7661L172.999 1.78906H179.981L191.978 24.9897Z" stroke="url(#svgGradient)" stroke-width="2" />
    <path d="M260.519 26.3862C260.519 30.9142 259.757 34.8709 258.234 38.2563C256.71 41.6206 254.552 44.1914 251.759 45.9688C248.966 47.7461 245.708 48.6348 241.984 48.6348C238.345 48.6348 235.118 47.7461 232.304 45.9688C229.49 44.1702 227.3 41.6206 225.734 38.3198C224.189 34.9979 223.396 31.1576 223.354 26.7988V23.4663C223.354 19.0229 224.126 15.098 225.67 11.6914C227.215 8.28483 229.394 5.68229 232.208 3.88379C235.044 2.06413 238.281 1.1543 241.92 1.1543C245.623 1.1543 248.882 2.05355 251.696 3.85205C254.531 5.62939 256.71 8.22135 258.234 11.6279C259.757 15.0133 260.519 18.9595 260.519 23.4663V26.3862ZM254.457 23.4028C254.457 17.9227 253.357 13.7227 251.156 10.8027C248.956 7.86165 245.877 6.39111 241.92 6.39111C238.069 6.39111 235.033 7.86165 232.812 10.8027C230.611 13.7227 229.479 17.7852 229.416 22.9902V26.3862C229.416 31.6971 230.526 35.876 232.748 38.9229C234.991 41.9486 238.069 43.4614 241.984 43.4614C245.919 43.4614 248.966 42.0332 251.125 39.1768C253.283 36.2992 254.394 32.1838 254.457 26.8306V23.4028Z" stroke="url(#svgGradient)" stroke-width="2" />
       <path d="M311.191 1.78906V33.21C311.17 37.5687 309.795 41.134 307.065 43.9058C304.357 46.6776 300.675 48.2327 296.021 48.5713L294.402 48.6348C289.345 48.6348 285.314 47.27 282.31 44.5405C279.305 41.811 277.782 38.0553 277.739 33.2734V1.78906H283.77V33.083C283.77 36.4261 284.69 39.0286 286.531 40.8906C288.372 42.7314 290.995 43.6519 294.402 43.6519C297.851 43.6519 300.485 42.7314 302.305 40.8906C304.146 39.0498 305.066 36.4578 305.066 33.1147V1.78906H311.191Z" stroke="url(#svgGradient)" stroke-width="2" />
       <path d="M371.879 29.3062H361.025V48H354.899V1.78906H370.197C375.402 1.78906 379.401 2.97396 382.194 5.34375C385.008 7.71354 386.416 11.1624 386.416 15.6904C386.416 18.568 385.633 21.0754 384.067 23.2124C382.522 25.3494 380.364 26.9469 377.592 28.0049L388.447 47.6191V48H381.909L371.879 29.3062ZM361.025 24.3232H370.388C373.413 24.3232 375.815 23.5404 377.592 21.9746C379.391 20.4089 380.29 18.3141 380.29 15.6904C380.29 12.834 379.433 10.644 377.719 9.12061C376.027 7.59717 373.572 6.82487 370.356 6.80371H361.025V24.3232Z" stroke="url(#svgGradient)" stroke-width="2"/>
       <path d="M430.105 26.6401H410.079V43.0171H433.343V48H403.985V1.78906H433.025V6.80371H410.079V21.6572H430.105V26.6401Z" stroke="url(#svgGradient)" stroke-width="2" />
       <path d="M475.446 35.9395H456.085L451.737 48H445.453L463.1 1.78906H468.432L486.11 48H479.857L475.446 35.9395ZM457.926 30.9248H473.637L465.766 9.31104L457.926 30.9248Z" stroke="url(#svgGradient)" stroke-width="2" />
       <path d="M501.331 48V1.78906H514.375C518.395 1.78906 521.95 2.67773 525.039 4.45508C528.128 6.23242 530.509 8.76091 532.18 12.0405C533.873 15.3201 534.73 19.0864 534.751 23.3394V26.291C534.751 30.6497 533.905 34.4689 532.212 37.7485C530.54 41.0282 528.139 43.5461 525.007 45.3022C521.897 47.0584 518.268 47.9577 514.121 48H501.331ZM507.424 6.80371V43.0171H513.835C518.533 43.0171 522.183 41.5571 524.785 38.6372C527.409 35.7173 528.721 31.5596 528.721 26.1641V23.4663C528.721 18.2189 527.483 14.1458 525.007 11.2471C522.553 8.32715 519.062 6.84603 514.534 6.80371H507.424Z" stroke="url(#svgGradient)" stroke-width="2" />
       <path d="M565.682 24.9897L577.743 1.78906H584.662L568.729 30.7661V48H562.635V30.7661L546.703 1.78906H553.685L565.682 24.9897Z" stroke="url(#svgGradient)" stroke-width="2" />
       <path d="M605.595 34.9873C605.638 32.4694 605.923 30.4805 606.452 29.0205C606.981 27.5605 608.06 25.9419 609.689 24.1646L613.847 19.8799C615.625 17.8698 616.513 15.7116 616.513 13.4053C616.513 11.1836 615.931 9.44857 614.768 8.2002C613.604 6.93066 611.911 6.2959 609.689 6.2959C607.531 6.2959 605.796 6.86719 604.484 8.00977C603.173 9.15234 602.517 10.6864 602.517 12.6118H596.645C596.687 9.18408 597.904 6.42285 600.295 4.32812C602.707 2.21224 605.839 1.1543 609.689 1.1543C613.688 1.1543 616.799 2.2334 619.021 4.3916C621.263 6.52865 622.385 9.46973 622.385 13.2148C622.385 16.9176 620.671 20.5675 617.243 24.1646L613.784 27.5923C612.239 29.3062 611.467 31.7712 611.467 34.9873H605.595ZM605.341 45.0483C605.341 44.0962 605.627 43.3027 606.198 42.668C606.791 42.012 607.658 41.6841 608.801 41.6841C609.943 41.6841 610.811 42.012 611.403 42.668C611.996 43.3027 612.292 44.0962 612.292 45.0483C612.292 46.0005 611.996 46.7939 611.403 47.4287C610.811 48.0423 609.943 48.3491 608.801 48.3491C607.658 48.3491 606.791 48.0423 606.198 47.4287C605.627 46.7939 605.341 46.0005 605.341 45.0483Z" stroke="url(#svgGradient)" stroke-width="2" />
</svg>