我想通过使用彩虹动画作为背景效果来为网站标题制作一个简单的公司徽标动画。因此彩虹动画应该可以通过位于白色背景上的透明图标看到。不幸的是，我找不到任何使用图标（.svg）的代码示例。
我是否必须创建某种svg路径（如果基于该图像我该怎么做？）还是有一种更简单的方法，我可以只在白色背景上使用黑色图标并使用带有.png文件的CSS混合模式？
这是我要使用的彩虹效果的示例： https://codepen.io/nohoid/pen/kIfto
.wrapper {
height: 100%;
width: 100%;
left:0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
animation: rainbow 18s ease infinite;}
@-webkit-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}<div class="wrapper"></div>
，我想它必须是此代码的修改版本？： https://w3bits.com/rainbow-text/
，这是我要使用的公司图标： https://ibb.co/G3gDNsk
最好的问候 最大更新：根据enxaneta的说法，这是到目前为止的代码，但是有一个主要问题为什么它不起作用。路径是复杂的，但我根本不知道该如何解决。
svg{border:1px solid;width:90vh}<svg viewBox='0 0 24 24'><title>done all</title>
<defs>
<linearGradient id="grd" x2="100%" y2="100%" >
<stop offset="0%" stop-color="#ff2400"></stop>
<stop offset="11%" stop-color="#e81d1d"></stop>
<stop offset="22%" stop-color="#e8b71d"></stop>
<stop offset="33%" stop-color="#e3e81d"></stop>
<stop offset="44%" stop-color="#1de840"></stop>
<stop offset="55%" stop-color="#2b1de8"></stop>
<stop offset="66%" stop-color="#ff2400"></stop>
<stop offset="77%" stop-color="#dd00f3"></stop>
<stop offset="88%" stop-color="#e8b71d"></stop>
<stop offset="100%" stop-color="#dd00f3"></stop>
</linearGradient>
<mask id="msk">
<path d='M 18.23,553.81
C 16.54,552.11 189.40,380.94 204.90,365.46
204.90,365.46 221.86,348.50 221.86,348.50
220.31,346.94 228.38,340.00 230.65,339.72
235.11,339.12 230.19,343.26 229.65,344.08
226.40,349.10 220.20,353.53 215.95,357.78
215.95,357.78 106.44,467.41 106.44,467.41
106.44,467.41 46.03,527.60 46.03,527.60
41.78,531.85 22.94,556.61 16.46,552.39
6.94,546.05 -1.91,561.39 7.54,567.69
24.22,578.77 35.87,563.05 46.49,552.36
46.49,552.36 102.19,496.66 102.19,496.66
102.19,496.66 229.97,368.86 229.97,368.86
239.46,359.37 256.39,347.44 248.84,331.97
238.86,311.36 219.95,325.45 209.40,336.00
209.40,336.00 88.52,456.79 88.52,456.79
88.52,456.79 22.38,522.90 22.38,522.90
11.76,533.52 -10.48,550.13 5.70,566.31
13.77,574.38 26.27,561.88 18.23,553.81 Z
M 224.71,333.10
C 228.62,329.19 234.96,329.19 238.88,333.10
238.88,333.10 238.90,333.13 238.90,333.13
242.82,337.04 242.82,343.39 238.90,347.30
238.90,347.30 26.14,560.08 26.14,560.08
22.23,563.99 15.88,563.99 11.97,560.08
11.97,560.08 11.94,560.05 11.94,560.05
8.03,556.14 8.03,549.79 11.94,545.88
11.94,545.88 224.71,333.10 224.71,333.10 Z
M 313.99,554.87
C 310.17,553.06 344.27,486.07 347.07,480.12
347.07,480.12 403.72,360.15 403.72,360.15
400.57,353.50 410.27,339.83 415.76,334.66
419.55,331.12 413.77,334.66 419.69,333.95
423.83,329.56 428.96,327.79 432.72,327.79
432.72,327.79 378.76,442.09 378.76,442.09
378.76,442.09 327.38,527.60 327.38,527.60
325.68,531.15 317.89,555.54 311.87,554.06
300.82,551.33 296.08,568.22 307.16,571.12
325.15,575.55 330.64,561.99 336.83,548.85
336.83,548.85 364.49,490.25 364.49,490.25
364.49,490.25 428.04,355.69 428.04,355.69
433.46,344.18 441.78,329.27 392.35,341.53
380.45,313.80 359.78,355.34 359.78,355.34
359.78,355.34 299.23,483.59 299.23,483.59
299.23,483.59 303.80,530.44 303.80,530.44
298.06,542.62 287.19,562.94 343.49,562.94
315.13,574.98 324.30,559.72 313.99,554.87 Z
M 408.18,329.91
C 408.18,329.91 408.18,329.91 408.18,329.91
410.55,324.90 416.52,322.76 421.52,325.12
421.52,325.12 421.55,325.14 421.55,325.14
426.56,327.50 428.70,333.47 426.34,338.48
426.34,338.48 426.34,338.48 426.34,338.48
426.34,338.48 322.85,557.73 322.85,557.73
320.48,562.73 314.51,564.87 309.51,562.51
309.51,562.51 309.48,562.50 309.48,562.50
304.47,560.13 302.33,554.16 304.69,549.16
304.69,549.16 408.18,329.91 408.18,329.91 Z
M 235.50,336.22
C 233.09,336.22 234.33,82.58 234.33,60.02
234.33,60.02 234.33,33.46 234.33,33.46
234.33,30.84 232.84,22.84 234.33,17.60
222.50,22.95 240.35,17.60 247.89,17.60
267.58,17.60 240.35,17.60 240.35,17.60
240.35,17.60 240.35,295.88 240.35,295.88
240.35,302.26 244.70,334.83 236.81,336.53
223.39,330.09 256.14,341.24 253.87,356.29
249.87,372.83 229.72,372.83 214.50,372.83
214.50,372.83 214.50,43.24 214.50,43.24
214.50,29.89 218.32,8.68 202.92,2.20
180.26,-7.37 176.72,18.20 176.72,33.46
176.72,33.46 176.72,310.33 176.72,310.33
176.72,325.45 172.44,353.92 195.59,353.92
246.90,353.92 246.90,336.22 235.50,336.22 Z
M 235.53,9.49
C 241.07,9.49 245.55,13.98 245.55,19.51
245.55,19.51 245.55,335.05 245.55,335.05
245.55,340.58 241.07,345.07 235.53,345.07
235.53,345.07 235.50,345.07 235.50,345.07
235.50,345.07 235.50,345.07 235.50,345.07
229.96,345.07 225.48,340.58 225.48,335.05
225.48,335.05 225.48,19.51 225.48,19.51
225.48,13.98 229.96,9.49 235.50,9.49
235.50,9.49 235.50,9.49 235.50,9.49
235.50,9.49 235.53,9.49 235.53,9.49 Z
M 417.28,336.22
C 414.87,336.22 416.11,82.58 416.11,60.02
416.11,60.02 416.11,33.46 416.11,33.46
416.11,30.84 414.62,22.84 416.11,17.60
404.28,22.95 422.13,17.60 429.67,17.60
449.36,17.60 422.13,17.60 422.13,17.60
422.13,17.60 422.13,295.88 422.13,295.88
422.13,302.26 426.48,334.83 418.59,336.53
405.17,330.09 437.92,341.24 435.66,356.29
431.65,372.83 411.51,372.83 396.28,372.83
396.28,372.83 396.28,43.24 396.28,43.24
396.28,29.89 400.11,8.68 384.70,2.20
362.04,-7.37 358.50,18.20 358.50,33.46
358.50,33.46 358.50,310.33 358.50,310.33
358.50,325.45 354.22,353.92 377.37,353.92
428.68,353.92 428.72,336.22 417.28,336.22 Z
M 417.31,9.49
C 422.85,9.49 427.33,13.98 427.33,19.51
427.33,19.51 427.33,335.05 427.33,335.05
427.33,340.58 422.85,345.07 417.31,345.07
417.31,345.07 417.28,345.07 417.28,345.07
411.74,345.07 407.26,340.58 407.26,335.05
407.26,335.05 407.26,19.51 407.26,19.51
407.26,13.98 411.74,9.49 417.28,9.49
417.28,9.49 417.31,9.49 417.31,9.49 Z
M 597.68,333.21
C 595.27,333.21 596.51,81.44 596.51,58.82
596.51,58.82 596.51,33.53 596.51,33.53
596.51,30.91 595.06,22.66 596.51,17.60
584.65,22.98 602.60,17.60 610.07,17.60
629.83,17.60 602.60,17.60 602.60,17.60
602.60,17.60 602.60,292.73 602.60,292.73
602.60,298.89 606.92,331.97 599.06,333.56
585.64,327.11 618.39,338.27 616.13,353.39
612.13,369.93 591.91,369.93 576.65,369.93
576.65,369.93 576.65,42.49 576.65,42.49
576.65,28.97 580.40,7.65 564.01,1.88
542.13,-5.81 538.87,17.92 538.87,32.90
538.87,32.90 538.87,307.21 538.87,307.21
538.87,322.33 534.58,350.91 557.74,350.91
609.01,350.91 609.01,333.21 597.68,333.21 Z
M 597.68,9.49
C 597.68,9.49 597.68,9.49 597.68,9.49
603.21,9.49 607.70,13.98 607.70,19.51
607.70,19.51 607.70,332.04 607.70,332.04
607.70,337.57 603.21,342.06 597.68,342.06
597.68,342.06 597.68,342.06 597.68,342.06
597.68,342.06 597.65,342.06 597.65,342.06
597.65,342.06 597.65,342.06 597.65,342.06
592.11,342.06 587.63,337.57 587.63,332.04
587.63,332.04 587.63,19.51 587.63,19.51
587.63,13.98 592.11,9.49 597.65,9.49
597.65,9.49 597.65,9.49 597.65,9.49
597.65,9.49 597.68,9.49 597.68,9.49 Z
M 780.10,555.30
C 777.45,555.30 778.79,123.90 778.79,85.34
778.79,85.34 778.79,41.29 778.79,41.29
778.79,36.26 776.49,24.54 778.79,20.04
776.21,12.50 787.01,27.51 787.01,27.51
787.01,27.51 787.01,487.84 787.01,487.84
787.01,495.70 792.32,553.91 783.46,555.68
770.05,549.24 802.80,560.39 800.53,579.69
795.68,596.09 755.78,596.09 738.07,596.09
738.07,596.09 738.07,28.33 738.07,28.33
738.07,18.70 720.08,21.03 713.85,13.95
702.70,-17.32 683.37,31.05 713.36,23.30
713.36,42.14 713.36,51.63 713.36,51.63
713.36,51.63 713.36,503.81 713.36,503.81
713.36,520.52 704.19,575.12 732.37,575.12
791.50,573.00 791.50,555.30 780.10,555.30 Z
M 780.10,8.96
C 780.10,8.96 780.10,8.96 780.10,8.96
785.58,8.96 790.02,13.40 790.02,18.87
790.02,18.87 790.02,554.23 790.02,554.23
790.02,554.23 790.02,554.23 790.02,554.23
790.02,559.71 785.58,564.15 780.10,564.15
780.10,564.15 780.10,564.15 780.10,564.15
780.10,564.15 779.85,564.15 779.85,564.15
779.85,564.15 779.85,564.15 779.85,564.15
774.38,564.15 769.94,559.71 769.94,554.23
769.94,554.23 769.94,554.23 769.94,554.23
769.94,554.23 769.94,18.87 769.94,18.87
769.94,13.40 774.38,8.96 779.85,8.96
779.85,8.96 779.85,8.96 779.85,8.96
779.85,8.96 780.10,8.96 780.10,8.96 Z' fill="white"></path>
</mask>
</defs>
<g style="mask: url(#msk)">
<rect x="-200" width="800" height = "573" fill='url(#grd)' >
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
values="0,0; 200,0; 0,0"
dur="10s"
repeatCount="indefinite" />
</rect>
</g>
</svg>
答案 0 :(得分：1)
这是我的解决方案：我正在使用svg蒙版剪切彩虹。为了使彩虹动起来，我使用了非常长的矩形并填充了彩虹。我正在使用animateTransform来回翻译此rect。我使用的颜色来自您链接的笔。
我希望这是您所需要的。
svg{border:1px solid;width:90vh}<svg viewBox='0 0 24 24'><title>done all</title>
<defs>
<linearGradient id="grd" x2="100%" y2="100%" >
<stop offset="0%" stop-color="#ff2400"></stop>
<stop offset="11%" stop-color="#e81d1d"></stop>
<stop offset="22%" stop-color="#e8b71d"></stop>
<stop offset="33%" stop-color="#e3e81d"></stop>
<stop offset="44%" stop-color="#1de840"></stop>
<stop offset="55%" stop-color="#2b1de8"></stop>
<stop offset="66%" stop-color="#ff2400"></stop>
<stop offset="77%" stop-color="#dd00f3"></stop>
<stop offset="88%" stop-color="#e8b71d"></stop>
<stop offset="100%" stop-color="#dd00f3"></stop>
</linearGradient>
<mask id="msk">
<path d='M18 7l-1.41-1.41-6.34 6.34 1.41 1.41 6.34-6.34zm4.24-1.41l-10.58 10.58-4.18-4.17-1.41 1.41 5.59 5.59 12-12-1.42-1.41zm-21.83 7.82l5.59 5.59 1.41-1.41-5.58-5.59-1.42 1.41z' fill="white"></path>
</mask>
</defs>
<g style="mask: url(#msk)">
<rect x="-200" width="224" height = "224" fill='url(#grd)' >
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
values="0,0; 200,0; 0,0"
dur="10s"
repeatCount="indefinite" />
</rect>
</g>
</svg>
在此更新中，我正在使用OP的路径。
svg{border:1px solid; width:100vh}<svg viewBox="0 0 259 190"><title>done all</title>
<defs>
<linearGradient id="grd" x2="100%" y2="100%" >
<stop offset="0%" stop-color="#ff2400"></stop>
<stop offset="11%" stop-color="#e81d1d"></stop>
<stop offset="22%" stop-color="#e8b71d"></stop>
<stop offset="33%" stop-color="#e3e81d"></stop>
<stop offset="44%" stop-color="#1de840"></stop>
<stop offset="55%" stop-color="#2b1de8"></stop>
<stop offset="66%" stop-color="#ff2400"></stop>
<stop offset="77%" stop-color="#dd00f3"></stop>
<stop offset="88%" stop-color="#e8b71d"></stop>
<stop offset="100%" stop-color="#dd00f3"></stop>
</linearGradient>
<mask id="msk">
<g fill="white">
<path d="M82.908,66.963c0,13.656,0.293,27.323-0.197,40.963
c-0.13,3.606-1.778,8.003-4.258,10.547c-18.482,18.958-37.344,37.546-56.108,56.229c-1.053,1.049-2.228,2.576-3.467,2.703
c-2.113,0.216-5.052,0.212-6.277-1.038c-1.141-1.165-0.869-4.14-0.509-6.193c0.224-1.278,1.677-2.414,2.729-3.464
c17.794-17.769,35.544-35.581,53.491-53.194c2.879-2.825,3.889-5.643,3.863-9.589c-0.162-25.312-0.095-50.628-0.062-75.942
c0.003-2.149-0.281-4.591,0.615-6.368c0.949-1.882,2.993-4.146,4.841-4.433c3.271-0.508,5.05,2.112,5.257,5.317
c0.193,2.985,0.079,5.992,0.081,8.989C82.911,43.314,82.908,55.139,82.908,66.963z"/>
<path d="M134.135,67.524c0,13.986,0.044,27.973-0.051,41.959
c-0.014,1.923-0.347,4.012-1.152,5.734c-8.87,18.968-17.852,37.883-26.844,56.793c-0.777,1.635-1.494,3.862-2.86,4.519
c-1.983,0.951-4.805,1.446-6.739,0.722c-1.163-0.435-1.948-3.617-1.77-5.454c0.215-2.209,1.557-4.338,2.545-6.438
c7.993-16.993,16.092-33.937,23.955-50.988c1.202-2.608,1.901-5.696,1.918-8.566c0.146-25.143,0.055-50.286,0.124-75.429
c0.009-3.142,0.108-6.413,1.005-9.371c0.491-1.622,2.967-3.979,4.137-3.764c2.002,0.367,3.909,2.292,5.398,3.969
c0.727,0.818,0.561,2.552,0.563,3.872c0.034,14.147,0.021,28.295,0.021,42.443C134.302,67.524,134.219,67.524,134.135,67.524z"/>
<path d="M236.904,97.508c0,23.484,0.017,46.968-0.027,70.452
c-0.004,2.139,0.213,4.638-0.778,6.317c-1.103,1.868-3.404,3.981-5.311,4.11c-1.435,0.097-3.737-2.516-4.446-4.382
c-0.905-2.386-0.788-5.232-0.783-7.881c0.087-46.296,0.225-92.593,0.355-138.889c0.005-1.665-0.097-3.351,0.128-4.989
c0.429-3.137,2.161-5.855,5.443-5.072c2.007,0.479,3.778,2.987,5.081,4.963c0.697,1.058,0.202,2.917,0.202,4.415
c0.006,23.651,0.004,47.304,0.004,70.955C236.816,97.508,236.86,97.508,236.904,97.508z"/>
<path d="M185.084,66.376c0,13.488,0.006,26.977-0.008,40.465
c-0.002,1.495,0.436,3.379-0.289,4.401c-1.293,1.822-3.18,4.057-5.083,4.341c-1.436,0.214-3.658-2.087-4.823-3.761
c-0.829-1.191-0.636-3.201-0.638-4.846c-0.032-26.477-0.044-52.954,0.017-79.431c0.005-2.303,0.055-4.841,1.004-6.83
c0.76-1.593,3.046-3.624,4.425-3.466c1.825,0.209,3.826,2.09,4.988,3.777c0.804,1.168,0.393,3.225,0.396,4.884
C185.094,39.399,185.084,52.888,185.084,66.376z"/>
</g>
</mask>
</defs>
<g style="mask: url(#msk)">
<rect x="-2000" y="0" width="2259" height = "2000" fill='url(#grd)' >
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
values="0,0; 2000,0; 0,0"
dur="10s"
repeatCount="indefinite" />
</rect>
</g>
</svg>
OP正在询问：
请问您如何调整路径，以便自己在需要时可以自己做？
在这种情况下，请务必确保svg viewBox与路径的边界框一样大或更大。要知道某个路径或一组路径的边界框，可以使用getBBox（）方法。
另外，用渐变填充的矩形应该比路径的边界框大得多。在这种情况下，为2000单位+边界框宽度= 2259。
animateTransform正在将rect从0转换为2000，然后再转换回0。