如何為 SVG 中的漸變顏色填充影片？我希望填充從不透明度 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>重現錯誤的 codepen 鏈接。
目前，漸變填充只是突然出現，而不是像黑色填充那樣緩慢淡入。我怎樣才能實作這個影片？謝謝
uj5u.com熱心網友回復：
您不能像使用顏色那樣在“繪畫”填充（例如漸變）中設定影片。
相反，您可以做的是為fill-opacity. 事實上，它實際上簡化了 SVG。因為使用可以為兩條路徑使用相同的填充影片。
.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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/430532.html