这是我的代码 -
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="385px" height="85px"
viewBox="0 0 143 32"
enable-background="new 0 0 143 32" xml:space="preserve">
<style type="text/css"><![CDATA[
@keyframes leftGradient {
0% { stop-color: rgb(255,255,255); }
3% { stop-color: rgb(234,255,255); }
4% { stop-color: rgb(234,255,255); }
5% { stop-color: rgb(198,255,255); }
10% { stop-color: rgb(10,255,255); }
15% { stop-color: rgb(10,117,231); }
20% { stop-color: rgb(58,126,192); }
25% { stop-color: rgb(97,197,191); }
30% { stop-color: rgb(0,150,128); }
35% { stop-color: rgb(108,130,69); }
40% { stop-color: rgb(6,219,40); }
45% { stop-color: rgb(205,219,40); }
50% { stop-color: rgb(255,199,8); }
55% { stop-color: rgb(243,124,32); }
60% { stop-color: rgb(236,30,36); }
65% { stop-color: rgb(184,32,37); }
70% { stop-color: rgb(84,1,37); }
75% { stop-color: rgb(138,24,125); }
80% { stop-color: rgb(212,24,194); }
85% { stop-color: rgb(251,125,238); }
95% { stop-color: rgb(247,203,242); }
100% { stop-color: rgb(255,255,255); }
}
@-webkit-keyframes leftGradient {
0% { stop-color: rgb(255,255,255); }
3% { stop-color: rgb(234,255,255); }
4% { stop-color: rgb(234,255,255); }
5% { stop-color: rgb(198,255,255); }
10% { stop-color: rgb(10,255,255); }
15% { stop-color: rgb(10,117,231); }
20% { stop-color: rgb(58,126,192); }
25% { stop-color: rgb(97,197,191); }
30% { stop-color: rgb(0,150,128); }
35% { stop-color: rgb(108,130,69); }
40% { stop-color: rgb(6,219,40); }
45% { stop-color: rgb(205,219,40); }
50% { stop-color: rgb(255,199,8); }
55% { stop-color: rgb(243,124,32); }
60% { stop-color: rgb(236,30,36); }
65% { stop-color: rgb(184,32,37); }
70% { stop-color: rgb(84,1,37); }
75% { stop-color: rgb(138,24,125); }
80% { stop-color: rgb(212,24,194); }
85% { stop-color: rgb(251,125,238); }
95% { stop-color: rgb(247,203,242); }
100% { stop-color: rgb(255,255,255); }
}
@-moz-keyframes leftGradient {
0% { stop-color: rgb(255,255,255); }
3% { stop-color: rgb(234,255,255); }
4% { stop-color: rgb(234,255,255); }
5% { stop-color: rgb(198,255,255); }
10% { stop-color: rgb(10,255,255); }
15% { stop-color: rgb(10,117,231); }
20% { stop-color: rgb(58,126,192); }
25% { stop-color: rgb(97,197,191); }
30% { stop-color: rgb(0,150,128); }
35% { stop-color: rgb(108,130,69); }
40% { stop-color: rgb(6,219,40); }
45% { stop-color: rgb(205,219,40); }
50% { stop-color: rgb(255,199,8); }
55% { stop-color: rgb(243,124,32); }
60% { stop-color: rgb(236,30,36); }
65% { stop-color: rgb(184,32,37); }
70% { stop-color: rgb(84,1,37); }
75% { stop-color: rgb(138,24,125); }
80% { stop-color: rgb(212,24,194); }
85% { stop-color: rgb(251,125,238); }
95% { stop-color: rgb(247,203,242); }
100% { stop-color: rgb(255,255,255); }
}
@keyframes rightGradient {
0% { stop-color: rgb(255,255,255); }
7% { stop-color: rgb(234,255,255); }
14% { stop-color: rgb(234,255,255); }
20% { stop-color: rgb(198,255,255); }
24% { stop-color: rgb(10,255,255); }
30% { stop-color: rgb(10,117,231); }
36% { stop-color: rgb(58,126,192); }
42% { stop-color: rgb(97,197,191); }
48% { stop-color: rgb(0,150,128); }
54% { stop-color: rgb(108,130,69); }
60% { stop-color: rgb(205,219,40); }
66% { stop-color: rgb(255,199,8); }
72% { stop-color: rgb(236,30,36); }
78% { stop-color: rgb(184,32,37); }
84% { stop-color: rgb(243,124,32); }
90% { stop-color: rgb(159,53,147); }
100% { stop-color: rgb(255,255,255); }
}
@-webkit-keyframes rightGradient {
0% { stop-color: rgb(255,255,255); }
7% { stop-color: rgb(234,255,255); }
14% { stop-color: rgb(234,255,255); }
20% { stop-color: rgb(198,255,255); }
24% { stop-color: rgb(10,255,255); }
30% { stop-color: rgb(10,117,231); }
36% { stop-color: rgb(58,126,192); }
42% { stop-color: rgb(97,197,191); }
48% { stop-color: rgb(0,150,128); }
54% { stop-color: rgb(108,130,69); }
60% { stop-color: rgb(205,219,40); }
66% { stop-color: rgb(255,199,8); }
72% { stop-color: rgb(236,30,36); }
78% { stop-color: rgb(184,32,37); }
84% { stop-color: rgb(243,124,32); }
90% { stop-color: rgb(159,53,147); }
100% { stop-color: rgb(255,255,255); }
}
@-moz-keyframes rightGradient {
0% { stop-color: rgb(255,255,255); }
7% { stop-color: rgb(234,255,255); }
14% { stop-color: rgb(234,255,255); }
20% { stop-color: rgb(198,255,255); }
24% { stop-color: rgb(10,255,255); }
30% { stop-color: rgb(10,117,231); }
36% { stop-color: rgb(58,126,192); }
42% { stop-color: rgb(97,197,191); }
48% { stop-color: rgb(0,150,128); }
54% { stop-color: rgb(108,130,69); }
60% { stop-color: rgb(205,219,40); }
66% { stop-color: rgb(255,199,8); }
72% { stop-color: rgb(236,30,36); }
78% { stop-color: rgb(184,32,37); }
84% { stop-color: rgb(243,124,32); }
90% { stop-color: rgb(159,53,147); }
100% { stop-color: rgb(255,255,255); }
}
#left { -webkit-animation: leftGradient 30s infinite; animation: leftGradient 30s infinite; }
#right { -webkit-animation: rightGradient 30s infinite; animation: rightGradient 30s infinite; }
]]></style>
<defs>
<linearGradient id="logo-gradient" x1="50%" y1="0%" x2="50%" y2="100%" >
<stop offset="0%" stop-color="#7A5FFF">
<animate attributeName="stop-color" values="#7A5FFF; #01FF89; #7A5FFF" dur="4s" repeatCount="indefinite"></animate>
</stop>
<stop offset="100%" stop-color="#01FF89">
<animate attributeName="stop-color" values="#01FF89; #7A5FFF; #01FF89" dur="4s" repeatCount="indefinite"></animate>
</stop>
</linearGradient>
<rect id="logo-gradient" x="0" y="100" width="100%" height="100%" style="fill:url(#mastGradient)" />
</defs>
<path fill="url('#logo-gradient')" opacity="1.00" d=" M 353.36 5.51 C 353.61 3.74 354.25 2.14 356.09 1.51 C 357.18 12.63 355.43 23.76 355.07 34.87 C 358.09 31.03 361.21 27.11 365.20 24.24 C 367.11 23.09 369.33 24.85 368.97 26.97 C 369.09 31.68 364.19 33.78 360.45 35.07 C 362.73 40.82 366.59 45.77 368.81 51.56 C 366.89 51.48 364.97 51.53 363.08 51.23 C 359.18 47.08 357.98 41.26 355.67 36.20 C 354.99 38.10 354.38 40.03 353.80 41.97 C 353.01 42.00 351.41 42.06 350.61 42.09 C 348.91 29.87 350.94 17.49 353.36 5.51 M 358.31 32.90 C 362.12 31.49 365.65 28.74 366.50 24.56 C 363.12 26.62 360.49 29.64 358.31 32.90 Z" />
<path fill="url('#logo-gradient')" opacity="1.00" d=" M 103.52 10.26 C 103.93 7.56 104.16 4.70 105.83 2.41 C 109.11 3.21 109.21 6.21 109.09 9.02 C 112.61 8.14 116.16 7.16 119.80 7.11 C 121.17 7.81 122.09 9.10 123.18 10.14 C 118.56 11.54 113.78 12.27 108.99 12.73 C 109.16 24.65 109.12 36.64 110.82 48.47 C 110.90 50.01 111.93 51.16 113.03 52.15 C 110.96 52.05 108.88 52.02 106.81 52.05 C 104.26 49.71 104.27 46.08 103.86 42.90 C 103.36 37.88 102.89 32.85 102.54 27.80 C 97.71 30.01 93.02 32.53 88.50 35.32 C 90.38 38.65 93.13 42.94 90.83 46.71 C 87.95 51.16 81.15 49.52 78.56 45.65 C 77.13 41.05 80.98 37.20 83.71 34.01 C 82.08 31.17 78.86 28.08 80.48 24.56 C 81.59 21.87 84.56 20.31 87.29 21.63 C 84.38 24.47 83.42 28.79 85.79 32.29 C 91.14 29.11 96.81 26.47 102.69 24.42 C 102.72 20.73 102.95 17.03 103.24 13.35 C 97.21 13.95 91.27 15.20 85.26 15.92 C 90.76 12.50 97.48 12.28 103.52 10.26 M 85.76 37.80 C 83.37 40.29 81.67 43.42 81.75 46.97 C 85.56 45.48 86.55 41.47 85.76 37.80 Z" />
<path fill="url('#logo-gradient')" opacity="1.00" d=" M 231.43 16.54 C 232.35 11.64 232.93 6.60 234.83 1.95 C 235.85 3.11 236.65 4.52 236.65 6.10 C 237.31 19.40 234.96 32.92 237.76 46.06 C 235.78 45.50 233.41 45.62 231.81 44.17 C 229.21 35.21 229.75 25.64 231.43 16.54 Z" />
<path fill="url('#logo-gradient')" opacity="1.00" d=" M 9.00 34.00 C 9.19 24.52 9.86 15.03 10.86 5.60 C 13.23 5.13 16.28 6.73 16.35 9.39 C 16.95 15.22 16.68 21.11 17.07 26.96 C 19.22 20.59 20.92 13.72 25.49 8.56 C 28.10 5.83 32.40 8.89 32.93 11.99 C 33.91 16.85 33.15 21.97 31.80 26.70 C 29.91 32.71 22.60 33.23 17.36 34.27 C 16.71 38.23 16.41 42.22 16.15 46.22 C 14.45 45.90 12.53 46.01 11.04 44.99 C 9.11 41.71 9.06 37.71 9.00 34.00 M 18.78 29.90 C 20.90 28.78 23.39 27.78 24.45 25.44 C 26.91 20.49 28.04 14.95 28.46 9.47 C 21.90 14.00 20.73 22.74 18.78 29.90 Z" />
<path fill="url('#logo-gradient')" opacity="1.00" d=" M 198.08 10.42 C 205.30 11.00 212.35 7.03 219.53 8.54 C 213.50 9.18 207.46 9.91 201.58 11.44 C 202.00 14.65 202.26 17.87 202.41 21.10 C 206.06 20.46 210.17 18.04 213.39 21.09 C 209.89 22.64 206.19 23.62 202.48 24.50 C 202.92 31.93 202.87 39.40 202.36 46.83 C 200.72 45.94 197.62 46.32 197.19 44.05 C 196.42 37.72 197.00 31.32 196.52 24.96 C 197.30 20.15 197.40 15.25 198.08 10.42 Z" />
<path fill="url('#logo-gradient')" opacity="1.00" d=" M 216.32 17.02 C 217.65 15.03 218.54 11.38 221.74 12.86 C 220.79 14.54 219.82 16.21 218.85 17.88 C 218.22 17.67 216.95 17.24 216.32 17.02 Z" />
<path fill="url('#logo-gradient')" opacity="1.00" d=" M 380.38 17.14 C 381.58 15.06 382.47 11.54 385.72 12.68 C 384.79 14.42 383.85 16.15 382.87 17.86 C 382.25 17.68 381.00 17.32 380.38 17.14 Z" />
<path fill="url('#logo-gradient')" opacity="1.00" d=" M 125.24 21.38 C 128.11 19.97 130.56 22.78 132.34 24.66 C 136.02 28.16 133.88 33.89 131.59 37.57 C 128.64 43.49 118.37 39.03 119.02 32.97 C 119.44 28.59 121.32 23.73 125.24 21.38 M 126.01 38.10 C 130.71 34.95 132.45 28.34 128.84 23.67 C 126.32 27.97 124.82 33.14 126.01 38.10 Z" />
<path fill="url('#logo-gradient')" opacity="1.00" d=" M 43.33 22.29 C 44.43 21.63 45.58 22.76 46.67 22.97 C 46.95 26.43 47.17 29.89 47.36 33.35 C 49.82 28.79 53.15 23.00 58.92 22.72 C 55.98 25.12 52.65 27.30 50.79 30.73 C 48.35 34.83 47.41 39.57 46.93 44.26 C 45.06 43.60 42.66 43.42 41.53 41.55 C 40.52 38.89 41.10 36.00 41.27 33.25 L 41.18 33.07 C 41.81 29.47 41.88 25.69 43.33 22.29 Z" />
<path fill="url('#logo-gradient')" opacity="1.00" d=" M 60.22 31.90 C 59.47 27.85 61.23 22.05 65.95 21.47 C 68.00 21.53 70.88 22.66 70.89 25.10 C 71.16 28.29 68.21 30.27 66.22 32.26 C 66.76 35.41 69.27 37.51 71.09 39.93 C 66.95 38.33 61.95 36.37 60.22 31.90 M 68.56 23.06 C 66.94 25.61 66.16 28.54 66.12 31.55 C 68.78 29.57 70.92 26.17 68.56 23.06 Z" />
<path fill="url('#logo-gradient')" opacity="1.00" d=" M 429.27 22.96 C 431.27 22.07 433.41 21.46 435.62 21.83 C 435.38 22.33 434.90 23.33 434.66 23.83 C 437.01 25.39 440.48 26.66 440.78 29.90 C 440.31 35.21 436.00 39.32 431.40 41.50 C 428.04 43.13 427.12 47.05 424.86 49.72 C 422.85 46.45 425.24 43.47 427.28 41.05 C 425.10 39.61 421.80 38.15 422.22 34.98 C 422.36 30.02 426.45 26.59 429.27 22.96 M 427.47 38.79 C 430.93 36.78 434.36 33.97 435.39 29.92 C 435.81 28.03 435.89 25.01 433.12 25.47 C 429.54 28.86 427.16 33.80 427.47 38.79 Z" />
<path fill="url('#logo-gradient')" opacity="1.00" d=" M 145.94 24.09 C 146.32 22.18 149.28 23.21 148.60 25.03 C 148.62 28.26 148.33 31.47 148.25 34.70 C 151.95 30.88 154.96 26.41 158.96 22.90 C 160.95 23.14 162.36 25.08 162.32 27.03 C 163.09 34.31 162.39 41.66 163.15 48.95 C 161.10 47.95 158.92 47.19 157.04 45.89 C 155.06 39.33 156.98 32.40 157.85 25.82 C 154.65 29.31 152.79 33.73 149.84 37.39 C 147.45 38.06 144.28 36.74 144.12 34.01 C 143.98 30.63 144.61 27.20 145.94 24.09 Z" />
<path fill="url('#logo-gradient')" opacity="1.00" d=" M 215.90 22.34 C 217.18 22.64 218.46 22.96 219.75 23.28 C 219.16 30.41 219.55 37.55 219.98 44.67 C 218.38 44.33 216.78 43.99 215.19 43.62 C 214.24 36.60 212.77 29.04 215.90 22.34 Z" />
<path fill="url('#logo-gradient')" opacity="1.00" d=" M 335.20 24.38 C 336.64 21.84 340.75 23.27 340.80 25.99 C 341.38 31.09 340.95 36.27 339.98 41.30 C 338.11 40.37 335.81 39.83 334.48 38.13 C 334.31 35.92 334.49 33.70 334.57 31.48 C 333.34 32.95 332.19 34.50 330.74 35.76 C 328.29 36.60 324.97 35.55 324.03 32.99 C 323.55 29.09 326.21 25.12 329.99 24.07 C 331.72 23.82 333.47 24.22 335.20 24.38 M 328.96 33.10 C 331.36 30.88 333.51 28.39 335.19 25.58 C 331.90 26.82 330.24 30.06 328.96 33.10 Z" />
<path fill="url('#logo-gradient')" opacity="1.00" d=" M 379.92 22.33 C 381.19 22.63 382.46 22.94 383.73 23.26 C 383.18 30.39 383.54 37.54 383.98 44.67 C 382.37 44.34 380.78 43.99 379.19 43.63 C 378.24 36.61 376.75 29.02 379.92 22.33 Z" />
<path fill="url('#logo-gradient')" opacity="1.00" d=" M 395.29 23.35 C 395.71 23.27 396.56 23.12 396.98 23.04 C 398.40 26.70 397.03 30.85 397.25 34.70 C 400.92 30.69 404.31 26.44 408.07 22.52 C 409.16 23.56 411.01 24.26 411.15 25.97 C 412.23 33.59 411.32 41.31 412.14 48.95 C 410.10 47.95 407.91 47.19 406.04 45.88 C 404.07 39.33 405.97 32.40 406.85 25.83 C 403.73 29.48 401.44 33.71 398.84 37.72 C 396.79 37.36 393.96 37.28 393.28 34.84 C 392.73 30.95 393.64 26.89 395.29 23.35 Z" />
<path fill="url('#logo-gradient')" opacity="1.00" d=" M 248.82 23.96 C 249.51 24.00 250.87 24.10 251.55 24.14 C 251.71 28.58 251.74 33.02 252.14 37.45 C 254.65 34.31 256.35 30.61 259.05 27.62 C 259.54 27.61 260.51 27.58 260.99 27.56 C 262.17 29.92 262.46 32.57 262.96 35.12 C 265.09 32.25 267.05 29.04 270.13 27.07 C 272.13 26.68 274.51 27.98 274.93 30.07 C 276.32 35.65 276.19 41.51 275.83 47.22 C 274.06 46.85 271.92 47.03 270.56 45.64 C 269.14 40.30 270.02 34.78 270.59 29.39 C 267.17 32.97 264.81 37.43 263.48 42.18 C 261.83 41.86 260.19 41.51 258.56 41.14 C 258.29 37.05 258.45 32.96 258.77 28.88 C 256.55 33.17 255.26 37.93 252.48 41.93 C 250.96 41.22 249.12 41.03 247.88 39.84 C 246.06 34.68 247.28 29.03 248.82 23.96 Z" />
<path fill="url('#logo-gradient')" opacity="1.00" d=" M 286.82 23.95 C 287.51 24.00 288.87 24.10 289.56 24.15 C 289.71 28.59 289.74 33.03 290.14 37.45 C 293.03 34.18 294.36 29.48 298.17 27.13 C 300.54 29.04 300.22 32.43 300.96 35.12 C 303.09 32.25 305.05 29.03 308.14 27.08 C 310.13 26.68 312.51 27.98 312.93 30.07 C 314.33 35.65 314.18 41.51 313.83 47.22 C 312.06 46.86 309.97 47.01 308.57 45.68 C 307.14 40.32 308.01 34.79 308.59 29.39 C 305.17 32.98 302.82 37.43 301.47 42.18 C 299.83 41.87 298.19 41.52 296.57 41.15 C 296.28 37.11 296.43 33.06 296.80 29.04 C 294.47 33.23 293.24 37.96 290.49 41.93 C 288.98 41.21 287.10 41.04 285.87 39.82 C 284.06 34.67 285.29 29.02 286.82 23.95 Z" />
<path fill="url('#logo-gradient')" opacity="1.00" d=" M 438.22 43.26 C 440.47 42.31 442.38 44.39 444.29 45.25 C 441.13 47.56 437.74 49.51 434.51 51.73 C 437.84 57.96 430.75 63.97 425.04 64.78 C 422.14 64.50 417.46 62.95 418.32 59.17 C 419.70 55.24 422.95 52.26 426.47 50.21 C 426.70 49.87 427.16 49.20 427.39 48.87 C 431.27 47.53 434.37 44.64 438.22 43.26 M 423.93 61.80 C 428.23 60.31 432.33 57.25 433.50 52.63 C 429.67 54.93 426.20 57.92 423.93 61.80 Z" />
这是一个 HTML 文件。我在 Illustrator 中重新创建了这个 SVG，并从 HTML 中复制了元素并应用于这个 SVG，并将填充添加到路径中，遵循在线教程。
谁能帮我解决这个问题？请。
我一直收到“在文档末尾”的错误 - 它在最后，我删除了它，但抛出了相同的错误，但错误编号不同。我删除了空格，但也用另一个数字引发了同样的错误。
我不知道为什么没有提取 CSS，它在我的 HTML 文件中运行良好 - 没有任何内容被删除或更改。
谢谢
最佳答案
Strange now its working! but my text is cut.
你的文字被截断的原因是因为你的 viewBox 太小了。
尝试将其更改为:
viewBox="0 0 445 65"
Still no idea why the CSS in't working
您的 CSS 不执行任何操作，因为它没有针对文件中的任何元素。
您的 CSS 以具有 id="left" 和 id="right" 的元素为目标。但是您的 SVG 中没有任何元素具有这些 ID。
关于css - 页面末尾错误 (XML SVG) & CSS 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50183341/