如何动画填充 svg 的线性渐变？

Question

如何为 SVG 中的渐变 colors 设置动画填充？ 我希望填充从不透明度 0 到不透明度 1 进行操作。

 .header-anim { min-height: 100vh; display: flex; align-items: center; justify-content: center; } #logo-anim path:nth-child(1) { stroke-dasharray: 1032; stroke-dashoffset: 1032; animation: line-anim 2s ease forwards, fill-black 0.5s ease forwards 2s; } #logo-anim path:nth-child(2) { stroke-dasharray: 1056; stroke-dashoffset: 1056; animation: line-anim 2s ease forwards, fill-gradient 0.5s ease forwards 2s; } @keyframes line-anim { to { stroke-dashoffset: 0; } } @keyframes fill-black { from { fill: transparent; } to { fill: black; } } @keyframes fill-gradient { from { fill: transparent; } to { fill: url(#paint0_linear_0_1); } }

 <div class="header-anim"> <svg id="logo-anim" width="234" height="233" viewBox="0 0 234 233" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M75.4995 83.1013L104.5 52.7419V149.908C103.841 155.213 101.512 163.152 96.6892 169.739C91.8749 176.315 84.6232 181.5 73.9995 181.5H22.7751C7.00798 158.997 -14.2991 102.251 23.2132 49.8815C28.6996 42.432 39.475 31.0305 53.8821 21.2016C68.2922 11.3708 86.2418 3.17637 106.088 1.99737C153.179 -0.800073 186.647 23.6983 201.465 38.5H185.579C179.439 32.991 168.434 25.3772 154.676 19.7975C140.599 14.0886 123.543 10.47 105.813 13.5101C86.2158 15.0713 42.0989 30.215 20.6414 78.3625C13.4533 92.9381 5.42859 131.796 29.7138 172.272L30.9052 174.257L32.2302 172.358L46.7825 151.5H61.9399C64.1719 151.674 67.4856 151.286 70.3053 149.49C73.2521 147.614 75.4995 144.295 75.4995 139V83.1013Z" stroke="black" stroke-width="3" /> <path d="M73.0043 222.051C57.832 216.175 42.4098 206.947 31.499 193H47.399C57.5515 202.587 82.9475 219.5 114 219.5C134.223 219.5 176.537 213.946 203.746 173.335L203.755 173.322L203.763 173.309C216.107 154.033 233.106 104.05 202.245 58.1629L201.228 56.6509L199.939 57.9393L177.879 80H162.148C159.838 79.5594 156.458 79.7889 153.599 81.9385C150.614 84.1823 148.5 88.2825 148.5 95V149.392L119.5 179.298V83.5C119.5 77.8938 121.122 69.4609 125.935 62.4762C130.694 55.5707 138.617 50 151.5 50H210.265C225.204 69.4906 246.888 120.188 217.2 171.752C187.163 223.922 135.874 232.968 114.135 231.006L114.094 231.002L114.052 231.001C104.628 230.673 89.0193 228.254 73.0043 222.051Z" stroke="url(#paint0_linear_0_1)" stroke-width="3" /> <defs> <linearGradient id="paint0_linear_0_1" x1="131.003" y1="48.5" x2="131.003" y2="232.748" gradientUnits="userSpaceOnUse"> <stop stop-color="#A77027" /> <stop offset="0.53125" stop-color="#F1E189" /> <stop offset="1" stop-color="#A77027" /> </linearGradient> </defs> </svg> </div>

重现错误的代码笔链接。

目前，渐变填充只是突然出现，而不是像黑色填充一样慢慢淡入。 我怎样才能实现这个 animation？ 谢谢

Answer 1

您不能像使用颜色那样在“绘制”填充（例如渐变）中设置动画。

您可以做的是为fill-opacity设置动画。 事实上，它实际上简化了 SVG。因为使用可以为两个路径使用相同的填充 animation。

 .header-anim { min-height: 100vh; display: flex; align-items: center; justify-content: center; } #logo-anim path:nth-child(1) { stroke-dasharray: 1032; stroke-dashoffset: 1032; fill: black; fill-opacity: 0; animation: line-anim 2s ease forwards, fill-anim 0.5s ease forwards 2s; } #logo-anim path:nth-child(2) { stroke-dasharray: 1056; stroke-dashoffset: 1056; fill: url(#paint0_linear_0_1); fill-opacity: 0; animation: line-anim 2s ease forwards, fill-anim 0.5s ease forwards 2s; } @keyframes line-anim { to { stroke-dashoffset: 0; } } @keyframes fill-anim { from { fill-opacity: 0; } to { fill-opacity: 1; } }

 <div class="header-anim"> <svg id="logo-anim" width="234" height="233" viewBox="0 0 234 233" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M75.4995 83.1013L104.5 52.7419V149.908C103.841 155.213 101.512 163.152 96.6892 169.739C91.8749 176.315 84.6232 181.5 73.9995 181.5H22.7751C7.00798 158.997 -14.2991 102.251 23.2132 49.8815C28.6996 42.432 39.475 31.0305 53.8821 21.2016C68.2922 11.3708 86.2418 3.17637 106.088 1.99737C153.179 -0.800073 186.647 23.6983 201.465 38.5H185.579C179.439 32.991 168.434 25.3772 154.676 19.7975C140.599 14.0886 123.543 10.47 105.813 13.5101C86.2158 15.0713 42.0989 30.215 20.6414 78.3625C13.4533 92.9381 5.42859 131.796 29.7138 172.272L30.9052 174.257L32.2302 172.358L46.7825 151.5H61.9399C64.1719 151.674 67.4856 151.286 70.3053 149.49C73.2521 147.614 75.4995 144.295 75.4995 139V83.1013Z" stroke="black" stroke-width="3" /> <path id="path-with-grad" d="M73.0043 222.051C57.832 216.175 42.4098 206.947 31.499 193H47.399C57.5515 202.587 82.9475 219.5 114 219.5C134.223 219.5 176.537 213.946 203.746 173.335L203.755 173.322L203.763 173.309C216.107 154.033 233.106 104.05 202.245 58.1629L201.228 56.6509L199.939 57.9393L177.879 80H162.148C159.838 79.5594 156.458 79.7889 153.599 81.9385C150.614 84.1823 148.5 88.2825 148.5 95V149.392L119.5 179.298V83.5C119.5 77.8938 121.122 69.4609 125.935 62.4762C130.694 55.5707 138.617 50 151.5 50H210.265C225.204 69.4906 246.888 120.188 217.2 171.752C187.163 223.922 135.874 232.968 114.135 231.006L114.094 231.002L114.052 231.001C104.628 230.673 89.0193 228.254 73.0043 222.051Z" stroke="url(#paint0_linear_0_1)" stroke-width="3" /> <defs> <linearGradient id="paint0_linear_0_1" x1="131.003" y1="48.5" x2="131.003" y2="232.748" gradientUnits="userSpaceOnUse"> <stop stop-color="#A77027" /> <stop offset="0.53125" stop-color="#F1E189" /> <stop offset="1" stop-color="#A77027" /> </linearGradient> </defs> </svg> </div>