开my website我希望我的SVG徽标在用户到达页面后淡出其填充,然后重复淡入淡出:悬停。我把它编码成codepen并且它完美无瑕。我正在使用最新的Chrome,因此我省略了测试的浏览器标签。
然而,在我的网页上,我似乎无法让它发挥作用。这段代码是CSS中的最后一个,并且chrome检查器中没有任何内容与我发生冲突。 javascript中有什么可能阻止这个吗? Bootstrap 3中有什么东西吗?我搜索过我的CSS并找不到任何东西。任何帮助将不胜感激。
@keyframes fill {
0% {fill: #000;}
50% {fill: #1756a9;}
100% {fill: #000;}
}
.website_logo {
animation-name: fill;
animation-duration: 4s;
}
.website_logo:hover {
animation-name: fill;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.icon-logo {
max-width:10em;
margin: 0 auto 3em auto;
}
<div class="icon-logo">
<svg version="1.1" width="100%" height="100%" viewBox="0 0 525 525">
<title>Andy Stevens</title>
<a xlink:href="/">
<path class="website_logo" stroke="black" stroke-width="0"
d="M 279.00,1.00
C 294.04,1.07 320.30,6.38 335.00,10.58
418.57,34.42 483.91,97.67 511.33,180.00
517.06,197.18 523.79,227.08 524.04,245.00
524.04,245.00 524.04,254.00 524.04,254.00
524.35,257.87 525.15,259.71 524.91,264.00
523.45,289.79 520.69,315.17 512.98,340.00
485.95,426.94 417.08,492.99 329.00,516.12
316.60,519.37 291.51,523.94 279.00,524.00
279.00,524.00 261.00,524.91 261.00,524.91
261.00,524.91 245.00,524.00 245.00,524.00
222.82,523.74 189.83,515.29 169.00,507.42
131.70,493.34 97.25,470.16 70.09,441.00
29.71,397.66 1.69,333.60 1.00,274.00
1.00,274.00 0.09,261.00 0.09,261.00
0.09,261.00 1.00,245.00 1.00,245.00
1.31,218.85 12.39,178.78 23.31,155.00
55.23,85.48 111.84,34.77 185.00,12.02
201.39,6.93 230.03,1.03 247.00,1.00
251.57,0.99 253.36,1.08 258.00,0.42
258.00,0.42 279.00,1.00 279.00,1.00 Z
M 226.39,130.00
C 231.04,154.81 237.13,178.90 244.66,203.00
244.66,203.00 250.93,223.98 250.93,223.98
251.81,226.58 253.49,229.53 256.79,228.34
259.12,227.51 259.65,225.19 259.67,223.00
259.67,223.00 259.67,218.00 259.67,218.00
259.94,212.66 260.99,213.32 261.00,204.00
261.00,204.00 261.00,122.00 261.00,122.00
261.00,122.00 262.04,112.00 262.04,112.00
262.04,112.00 262.04,103.00 262.04,103.00
262.37,100.57 263.24,96.73 261.17,94.83
260.32,94.05 259.20,93.83 258.10,94.12
254.43,95.06 255.01,100.10 255.00,103.00
255.00,103.00 255.00,175.00 255.00,175.00
255.00,183.97 255.83,205.48 254.00,213.00
254.00,213.00 245.12,179.00 245.12,179.00
245.12,179.00 233.13,133.00 233.13,133.00
232.26,126.92 231.85,121.93 229.97,116.00
229.97,116.00 226.78,107.00 226.78,107.00
225.99,104.16 226.17,99.91 223.57,98.18
222.59,97.53 221.25,97.23 220.09,97.42
214.81,98.27 216.00,108.97 215.96,113.00
215.96,113.00 215.96,127.00 215.96,127.00
215.96,127.00 215.00,138.00 215.00,138.00
215.00,138.00 215.00,159.00 215.00,159.00
215.00,159.00 216.00,176.00 216.00,176.00
216.00,176.00 216.00,191.00 216.00,191.00
216.00,191.00 217.00,207.00 217.00,207.00
217.00,207.00 217.00,227.00 217.00,227.00
217.00,227.00 223.00,227.00 223.00,227.00
223.00,227.00 223.00,214.00 223.00,214.00
223.00,214.00 221.00,183.00 221.00,183.00
221.00,183.00 221.00,150.00 221.00,150.00
221.00,139.35 220.18,122.84 223.00,113.00
223.00,113.00 226.39,130.00 226.39,130.00 Z
M 163.58,217.00
C 164.33,212.89 165.65,201.17 168.51,198.60
170.29,196.99 172.75,196.99 175.00,197.17
178.75,197.48 187.92,199.00 189.98,202.28
191.57,204.80 190.99,214.60 191.00,218.00
191.01,221.14 190.35,226.69 194.95,226.72
196.11,226.73 197.09,226.35 198.08,225.43
199.60,223.19 198.77,218.61 198.08,216.00
198.08,216.00 198.08,200.00 198.08,200.00
198.08,200.00 196.82,178.00 196.82,178.00
196.82,178.00 195.28,170.00 195.28,170.00
195.28,170.00 195.28,161.00 195.28,161.00
195.28,161.00 194.17,154.00 194.17,154.00
194.17,154.00 192.03,129.00 192.03,129.00
192.03,129.00 189.84,106.00 189.84,106.00
189.46,103.28 188.64,98.86 185.05,98.86
182.02,98.86 180.71,102.67 179.87,105.00
179.87,105.00 174.20,128.00 174.20,128.00
174.20,128.00 162.61,190.00 162.61,190.00
162.61,190.00 159.11,210.00 159.11,210.00
159.11,210.00 155.00,224.00 155.00,224.00
162.17,227.11 162.44,223.24 163.58,217.00 Z
M 277.89,104.02
C 277.89,104.02 279.95,114.00 279.95,114.00
279.95,114.00 279.95,138.00 279.95,138.00
279.95,138.00 280.91,150.00 280.91,150.00
280.91,150.00 283.09,182.00 283.09,182.00
283.09,182.00 284.00,196.00 284.00,196.00
284.00,196.00 283.01,208.00 283.01,208.00
283.01,208.00 283.01,216.00 283.01,216.00
282.18,220.81 278.99,224.32 283.01,226.67
284.63,227.50 286.39,227.61 288.00,227.21
290.26,226.64 293.12,224.50 295.00,223.10
303.48,216.80 306.57,213.49 311.24,204.00
316.72,192.90 320.99,171.44 320.99,159.00
320.99,159.00 320.04,148.00 320.04,148.00
319.67,139.86 319.11,129.84 317.10,122.00
314.83,113.10 305.90,101.69 297.00,98.56
293.59,97.55 285.68,97.87 282.04,98.56
279.15,99.71 277.78,100.45 277.89,104.02 Z
M 343.08,107.00
C 342.69,104.66 342.28,98.63 339.00,98.63
337.85,98.63 337.07,99.33 336.60,100.32
335.37,102.89 336.87,107.40 337.58,110.00
337.58,110.00 342.80,132.00 342.80,132.00
349.06,163.30 352.38,176.26 352.00,209.00
352.00,209.00 351.04,223.00 351.04,223.00
351.18,225.38 352.08,229.88 355.61,228.38
358.50,227.15 358.00,221.58 358.00,219.00
358.00,219.00 358.00,188.00 358.00,188.00
358.00,188.00 357.29,174.00 357.29,174.00
357.29,174.00 357.29,162.00 357.29,162.00
357.29,162.00 357.29,154.00 357.29,154.00
357.29,154.00 365.00,98.00 365.00,98.00
358.02,99.20 358.05,104.90 357.29,111.00
356.17,119.95 356.49,140.55 351.00,147.00
351.00,147.00 343.08,107.00 343.08,107.00 Z
M 289.00,190.00
C 289.00,190.00 288.00,172.00 288.00,172.00
288.00,172.00 287.00,156.00 287.00,156.00
287.00,156.00 285.79,125.00 285.79,125.00
285.99,121.10 284.29,108.91 285.79,106.44
286.92,103.85 290.66,104.68 293.00,105.10
300.57,106.47 305.08,110.31 308.68,117.00
312.52,124.16 314.90,136.86 315.00,145.00
315.21,163.24 314.97,175.36 309.00,193.00
305.60,203.02 299.27,213.98 289.00,218.00
289.00,218.00 289.00,190.00 289.00,190.00 Z
M 187.15,138.00
C 187.15,138.00 190.00,173.00 190.00,173.00
190.00,173.00 191.00,193.00 191.00,193.00
186.55,193.00 172.64,194.01 170.02,190.44
167.52,187.03 172.09,173.31 173.12,169.00
173.12,169.00 178.42,136.00 178.42,136.00
178.42,136.00 183.00,113.00 183.00,113.00
183.00,113.00 187.15,138.00 187.15,138.00 Z
M 340.39,293.00
C 345.04,317.81 351.13,341.90 358.66,366.00
358.66,366.00 364.93,386.98 364.93,386.98
365.81,389.58 367.49,392.53 370.79,391.34
373.12,390.51 373.65,388.19 373.67,386.00
373.67,386.00 373.67,381.00 373.67,381.00
373.94,375.66 374.99,376.32 375.00,367.00
375.00,367.00 375.00,285.00 375.00,285.00
375.00,285.00 376.04,275.00 376.04,275.00
376.04,275.00 376.04,266.00 376.04,266.00
376.37,263.57 377.24,259.73 375.17,257.83
374.32,257.05 373.20,256.83 372.10,257.12
368.43,258.06 369.01,263.10 369.00,266.00
369.00,266.00 369.00,338.00 369.00,338.00
369.00,346.97 369.83,368.48 368.00,376.00
368.00,376.00 359.12,342.00 359.12,342.00
359.12,342.00 347.13,296.00 347.13,296.00
346.26,289.92 345.85,284.93 343.97,279.00
343.97,279.00 340.78,270.00 340.78,270.00
339.99,267.16 340.17,262.91 337.57,261.18
336.59,260.53 335.25,260.23 334.09,260.42
328.81,261.27 330.00,271.97 329.96,276.00
329.96,276.00 329.96,290.00 329.96,290.00
329.96,290.00 329.00,301.00 329.00,301.00
329.00,301.00 329.00,322.00 329.00,322.00
329.00,322.00 330.00,339.00 330.00,339.00
330.00,339.00 330.00,354.00 330.00,354.00
330.00,354.00 331.00,370.00 331.00,370.00
331.00,370.00 331.00,390.00 331.00,390.00
331.00,390.00 337.00,390.00 337.00,390.00
337.00,390.00 337.00,377.00 337.00,377.00
337.00,377.00 335.00,346.00 335.00,346.00
335.00,346.00 335.00,313.00 335.00,313.00
335.00,302.35 334.18,285.84 337.00,276.00
337.00,276.00 340.39,293.00 340.39,293.00 Z
M 104.04,262.22
C 98.21,267.36 95.66,276.40 96.09,284.00
96.96,299.33 103.52,312.54 110.25,326.00
115.22,335.96 121.64,350.61 120.82,362.00
120.25,369.82 117.34,383.85 109.96,387.95
104.29,391.02 101.80,386.17 94.00,387.95
98.48,396.92 111.27,395.22 117.82,389.47
124.15,383.91 126.44,374.00 127.57,366.00
128.79,357.44 123.48,336.87 119.83,329.00
114.73,318.01 108.07,307.89 105.13,296.00
102.85,286.77 100.51,271.95 110.09,265.75
113.97,263.25 115.67,265.66 122.00,264.00
118.00,256.49 109.89,257.07 104.04,262.22 Z
M 401.04,262.22
C 395.21,267.36 392.66,276.40 393.09,284.00
393.96,299.33 400.52,312.54 407.25,326.00
412.22,335.96 418.64,350.61 417.82,362.00
417.25,369.82 414.34,383.85 406.96,387.95
401.29,391.02 398.80,386.17 391.00,387.95
395.48,396.92 408.27,395.22 414.82,389.47
421.15,383.91 423.44,374.00 424.57,366.00
425.79,357.44 420.48,336.87 416.83,329.00
411.73,318.01 405.07,307.89 402.13,296.00
399.85,286.77 397.51,271.95 407.09,265.75
410.97,263.25 412.67,265.66 419.00,264.00
415.00,256.49 406.89,257.07 401.04,262.22 Z
M 202.00,268.00
C 204.45,267.96 209.15,268.16 209.56,264.83
209.70,263.72 209.24,262.70 208.40,261.98
205.18,259.28 192.66,260.72 190.31,264.28
188.39,267.20 189.11,271.74 189.58,275.00
190.68,282.64 191.09,284.10 191.00,292.00
191.00,292.00 190.00,306.00 190.00,306.00
190.00,306.00 190.00,331.00 190.00,331.00
190.00,331.00 190.96,341.00 190.96,341.00
190.96,341.00 190.96,358.00 190.96,358.00
190.96,358.00 190.04,370.00 190.04,370.00
190.04,370.00 190.60,380.00 190.60,380.00
190.34,383.26 188.63,387.04 190.60,389.40
192.53,391.34 196.58,391.00 199.00,391.00
199.00,391.00 206.00,391.00 206.00,391.00
211.55,390.92 214.21,390.73 216.00,385.00
216.00,385.00 198.00,384.00 198.00,384.00
198.00,384.00 197.13,371.00 197.13,371.00
197.13,371.00 197.13,343.00 197.13,343.00
197.13,343.00 197.13,330.30 197.13,330.30
197.98,323.51 211.08,328.16 208.34,321.30
206.89,317.64 199.08,319.75 196.00,320.00
196.00,320.00 196.96,311.00 196.96,311.00
196.96,311.00 196.96,293.00 196.96,293.00
196.96,293.00 196.04,281.00 196.04,281.00
196.04,281.00 196.04,268.00 196.04,268.00
196.04,268.00 202.00,268.00 202.00,268.00 Z
M 246.41,330.00
C 246.41,330.00 239.59,284.00 239.59,284.00
238.88,279.59 237.24,264.32 234.30,261.78
232.55,260.27 231.02,260.74 229.00,261.00
229.00,261.00 231.79,274.00 231.79,274.00
231.79,274.00 234.92,292.00 234.92,292.00
234.92,292.00 245.75,362.00 245.75,362.00
245.75,362.00 249.89,385.00 249.89,385.00
250.44,387.30 251.38,392.26 254.83,391.26
258.09,390.31 257.87,385.63 258.08,383.00
258.08,383.00 260.17,360.00 260.17,360.00
260.17,360.00 267.28,296.00 267.28,296.00
267.28,296.00 269.70,283.00 269.70,283.00
269.70,283.00 271.77,265.02 271.77,265.02
271.54,262.53 270.00,259.93 267.13,261.17
263.51,262.72 264.11,267.84 263.96,271.00
263.96,271.00 261.28,297.00 261.28,297.00
261.28,297.00 258.16,324.00 258.16,324.00
258.16,324.00 254.00,365.00 254.00,365.00
254.00,365.00 252.00,365.00 252.00,365.00
252.00,365.00 246.41,330.00 246.41,330.00 Z
M 300.00,268.00
C 302.45,267.96 307.15,268.16 307.56,264.83
307.70,263.72 307.24,262.70 306.40,261.98
303.18,259.28 290.66,260.72 288.31,264.28
286.39,267.20 287.11,271.74 287.58,275.00
288.68,282.64 289.09,284.10 289.00,292.00
289.00,292.00 288.00,306.00 288.00,306.00
288.00,306.00 288.00,331.00 288.00,331.00
288.00,331.00 288.96,341.00 288.96,341.00
288.96,341.00 288.96,358.00 288.96,358.00
288.96,358.00 288.04,370.00 288.04,370.00
288.04,370.00 288.60,380.00 288.60,380.00
288.34,383.26 286.63,387.04 288.60,389.40
290.53,391.34 294.58,391.00 297.00,391.00
297.00,391.00 304.00,391.00 304.00,391.00
309.55,390.92 312.21,390.73 314.00,385.00
314.00,385.00 296.00,384.00 296.00,384.00
296.00,384.00 295.13,371.00 295.13,371.00
295.13,371.00 295.13,343.00 295.13,343.00
295.13,343.00 295.13,330.30 295.13,330.30
295.98,323.51 309.08,328.16 306.34,321.30
304.89,317.64 297.08,319.75 294.00,320.00
294.00,320.00 294.96,311.00 294.96,311.00
294.96,311.00 294.96,293.00 294.96,293.00
294.96,293.00 294.04,281.00 294.04,281.00
294.04,281.00 294.04,268.00 294.04,268.00
294.04,268.00 300.00,268.00 300.00,268.00 Z
M 146.06,263.39
C 144.49,263.93 141.92,265.39 143.17,267.44
145.50,271.29 153.81,265.91 156.26,271.16
156.96,272.66 156.98,275.32 157.16,277.00
157.78,282.65 158.31,287.24 157.91,293.00
157.91,293.00 157.10,302.00 157.10,302.00
157.10,302.00 157.96,309.00 157.96,309.00
157.96,309.00 157.96,320.00 157.96,320.00
157.96,320.00 159.00,336.00 159.00,336.00
159.00,336.00 160.00,355.00 160.00,355.00
160.00,355.00 159.00,376.00 159.00,376.00
158.96,379.62 157.84,385.62 159.65,388.69
161.04,391.07 163.38,390.87 164.83,388.69
166.22,386.58 166.00,382.48 166.00,380.00
166.00,380.00 166.00,375.00 166.00,375.00
166.00,375.00 165.00,362.00 165.00,362.00
165.00,362.00 165.00,343.00 165.00,343.00
165.00,343.00 163.03,317.00 163.03,317.00
163.03,317.00 163.03,292.00 163.03,292.00
163.03,292.00 163.03,278.00 163.03,278.00
162.97,275.77 162.13,270.04 163.03,268.44
164.25,266.60 166.12,266.69 168.00,266.67
177.16,266.57 176.49,261.16 168.00,261.10
168.00,261.10 164.00,261.10 164.00,261.10
164.00,261.10 159.00,261.10 159.00,261.10
159.00,261.10 146.06,263.39 146.06,263.39 Z" />
</a>
</svg>
</div>
答案 0 :(得分:0)
您发布的代码似乎正常工作:
@keyframes fill {
0% {fill: #333;}
50% {fill: #1756a9;}
100% {fill: #333;}
}
.logo {
animation-name: fill;
animation-duration: 4s;
}
.logo:hover {
animation-name: fill;
animation-duration: 4s;
animation-iteration-count: infinite;
}
<svg viewBox="0 0 100 100" width="100" height="100">
<rect class="logo" x="0" y="0" width="100" height="100" fill="#333"/>
</svg>
看起来问题出在其他地方。不要在其他网站上粘贴大量代码,而是尝试创建minimal, complete & verifiable example问题。
(注意:这实际上不是你问题的答案,所以我很快就要将其删除。)
答案 1 :(得分:0)
问题as it turns out与链接SVG的访问状态有关。这与我在初始帖子中提供的codepend和代码片段一样可以重现。如果单击SVG链接,它将把iFrame带到stackoverflow索引或codepen索引。如果您再点击浏览器后退按钮,则动画将停止。这是Safari和谷歌浏览器中的一个错误。 Firefox似乎正在解决这个问题。