html - 用 svg-icon 剪辑出彩虹动画
问题描述
我想通过使用彩虹动画作为背景效果来为网站标题制作一个简单的公司徽标。所以彩虹动画应该通过位于白色背景上的透明图标可见。不幸的是，我找不到任何关于如何使用图标 (.svg) 进行操作的代码示例。
我是否必须创建某种 svg 路径（如果，我如何根据该图像来做到这一点？）或者有一个更简单的方法，我可以在白色背景上使用黑色图标并使用 css 混合 -带有 .png 文件的模式？
这是我想使用的彩虹效果示例： 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>解决方案
这是我的解决方案：我正在使用 svg 蒙版来切出彩虹。为了给彩虹设置动画，我使用了一个带有彩虹填充的很长的矩形。我正在使用animateTransform. 我使用的颜色来自您链接的笔。
我希望这是你需要的。
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矩形从 0 转换为 2000 并返回到 0。
推荐阅读
- c - Cloudant 的 C SDK？
- javascript - 为什么快速点击多次会触发 mouseleave 事件？
- horizontal-scrolling - Fullpage.js - 在非全页模式中启用垂直滚动
- microsoft-graph-api - 通过 Graph API 将参考附件发送到电子邮件
- gradle - JacocoTestReport 已跳过
- node.js - 更新 NodeJS 后出现以下错误：无法加载 gRPC 二进制模块
- python - Pandas - 快速读取/写入相同的 csv.. 获取权限错误
- php - 将文件（pdf）附加到重力形式通知
- reactjs - 使用 Prerender.io 如何将爬虫重定向到我们碎片化的站点？
- emacs - 在 Emacs 根项目中保存 TAGS 文件