What's preventing my CSS3 SVG animation? - css
On my website I want my SVG logo to fade its fill once the user reaches the page, and then repeat the fade on :hover. I've coded it into a codepen and it works flawlessly. I'm using the newest Chrome so I left out browser tags for the test.
However on my page I can't seem to get it working. This bit of code is the last in the CSS, and there's nothing in the chrome inspector that conflicts with it that I can tell. Is there anything in javascript that might prevent this? Anything in Bootstrap 3? I've searched my css and can't find a thing. Any help would be much appreciated.
#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>
The code you posted seems to work OK:
#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>
It looks like the problem is somewhere else. Instead of pasting a huge wall of code on some other site, try creating a minimal, complete & verifiable example of the problem.
(Note: this isn't actually an answer to your question, so I'll have to delete it soon.)
The problem, as it turns out, has something to do with the visited state of the linked SVG. This is reproducible with the both the codepend and code snippet I provided in my initial post. If you click the SVG link it will take that iFrame to the stackoverflow index or the codepen index. If you then hit the browser back button the animation will stop. This is a bug in both Safari and Google Chrome. Firefox seems to work through this bug.
Related
How to fill SVG?
could you please tell me guys how to fill this SVG?
<svg class="animationCounter2" width="80%" height="80%" viewBox="0 0 295 298" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path class="path" fill-rule="evenodd" clip-rule="evenodd" d="M0 45.4119C27.6939 36.5087 55.7265 28.637 84.1171 22.1956C112.508 15.7834 141.208 10.7528 170.102 7.18185C198.996 3.64005 228.073 1.63562 257.161 0.740441C271.704 0.28312 286.258 0.0982462 300.801 0.0204044C308.068 -0.0282467 315.345 0.0204044 322.622 0.0593253C329.898 0.0982462 337.165 0.0982462 344.442 0.234469C373.529 0.555567 402.607 1.45075 431.675 2.80325C460.733 4.15575 489.772 5.99476 518.772 8.30082C547.773 10.6069 576.734 13.3897 605.647 16.5715C634.56 19.7436 663.425 23.3535 692.261 27.1483C721.097 30.9431 749.894 34.9616 778.71 38.8634C807.517 42.7458 836.333 46.5892 865.217 49.7321C879.654 51.3668 894.111 52.6998 908.587 53.9453C915.825 54.4805 923.063 55.1032 930.31 55.5119C933.929 55.7259 937.558 55.9984 941.177 56.1638L952.053 56.66C966.549 57.2925 981.054 57.3898 995.53 56.7768C1009.98 56.1054 1024.46 54.8307 1038.47 51.5906C1045.44 49.9267 1052.36 47.7666 1058.44 44.2637C1061.45 42.5123 1064.22 40.3522 1066.26 37.6958C1068.32 35.0492 1069.45 31.848 1069.44 28.53C1069.45 26.9245 1069.12 25.3676 1068.4 24.0249C1067.71 22.6821 1066.61 21.5631 1065.29 20.775C1062.64 19.1889 1059.14 19.0235 1056.19 20.162C1053.2 21.2809 1050.81 23.7135 1049.5 26.7201C1048.85 28.2186 1048.4 29.8435 1048.18 31.5269C1047.96 33.2005 1047.89 34.9616 1048.07 36.5671C1048.45 39.8462 1049.98 42.921 1052.17 45.5384C1054.35 48.1655 1057.12 50.3548 1060.09 52.2522C1066.06 56.0276 1072.8 58.6742 1079.64 60.7856C1083.07 61.8365 1086.54 62.722 1090.08 63.4809C1093.6 64.2788 1097.14 64.9891 1100.7 65.641C1107.81 66.9254 1114.98 67.8984 1122.17 68.5309C1150.95 71.1191 1180.28 67.9276 1207.74 58.645C1235.18 49.3526 1260.69 34.1929 1282 14.2752C1261.22 34.7476 1235.84 50.53 1208.31 60.2991C1194.54 65.174 1180.25 68.6282 1165.74 70.3894C1151.23 72.2089 1136.53 72.4425 1121.95 71.3137C1114.67 70.7494 1107.4 69.8347 1100.19 68.6087C1096.59 67.986 1092.99 67.2952 1089.42 66.5265C1085.84 65.787 1082.26 64.8821 1078.74 63.8215C1071.7 61.6808 1064.74 58.9953 1058.38 55.0059C1055.21 52.9917 1052.19 50.637 1049.68 47.6596C1047.18 44.7113 1045.28 41.0041 1044.8 36.9855C1044.57 34.9616 1044.65 33.035 1044.9 31.089C1045.15 29.143 1045.66 27.2066 1046.48 25.3676C1047.29 23.5286 1048.44 21.8064 1049.9 20.3663C1051.35 18.9262 1053.12 17.7878 1055.04 17.058C1058.86 15.5985 1063.34 15.7736 1066.99 17.9337C1068.8 19.0041 1070.36 20.5901 1071.33 22.4875C1072.33 24.3752 1072.76 26.5061 1072.75 28.5494C1072.75 30.5441 1072.41 32.568 1071.74 34.4654C1071.07 36.3725 1070.09 38.1337 1068.89 39.7002C1066.47 42.8334 1063.35 45.2076 1060.09 47.0952C1056.82 48.9926 1053.37 50.4521 1049.87 51.6782C1046.37 52.9139 1042.81 53.8772 1039.23 54.7237C1024.87 58.0028 1010.26 59.2288 995.684 59.8613C981.102 60.4354 966.51 60.2991 951.966 59.618C937.423 58.9855 922.898 58.032 908.384 56.8838C893.879 55.6481 879.393 54.315 864.937 52.6901C836.004 49.557 807.168 45.733 778.342 41.8604C749.526 37.9683 720.729 33.9692 691.903 30.2036C634.26 22.6334 576.502 15.9682 518.569 11.3172C489.608 8.98194 460.598 7.11374 431.578 5.74178C402.549 4.36008 373.51 3.43571 344.452 3.08542C337.185 2.93947 329.927 2.92974 322.66 2.89082L300.869 2.82271C286.335 2.82271 271.811 2.92974 257.296 3.30922C228.267 4.04872 199.257 5.90719 170.411 9.27385C141.556 12.5529 112.856 17.3013 84.4461 23.4216C55.9684 29.5127 27.8197 36.9077 0 45.4119Z" fill="white"/>
</svg>
.svg-path{
fill:transparent;
stroke:white;
stroke-miterlimit:10;
stroke-width:2px;
fill-rule:evenodd;
}
.draw2{
stroke-dasharray: 3000;
animation: 5s write2;
filter: drop-shadow(0px 1px 10px gray);
}
#keyframes write2 {
0% {
stroke-dashoffset: 3000;
}
100% {
stroke-dashoffset: 0;
}
}
When i set the fill to white; it looks good, but i almost cant see the animation, when i set the stroke-width to for example 5px, its too thick..
CSS Animation with Transform Translate [closed]
Closed. This question needs debugging details. It is not currently accepting answers. Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question. Closed 2 years ago. Improve this question i want the bottom right animated thing to be animated like translatedX 0 to translatedX 20px then come back to -20px then to up with translateY -10px straight then come down to translateY 0px straight and then get back to translateX 0px. but it is not heppening whtn it is going up and down diagonally. codesendbox: https://codesandbox.io/s/svg-animation-ch1vz?file=/index.html:602-930
Try using this:
#keyframes leftStob {
0% {
transform: translateX(0px);
}
20% {
transform: translateX(20px);
}
40% {
transform: translateX(-20px);
}
60% {
transform: translate(-20px,-10px);
}
80% {
transform: translate(-20px, 0px);
}
100% {
transform: translateX(0px);
}
}
Working example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#stob1 {
animation: leftStob 6s linear infinite;
transform-origin: 10% 70%;
transform-box: fill-box;
}
#stob2 {
}
#like1 {
}
#like2 {
}
#love1 {
}
#love2 {
}
#love3 {
}
/* #pata1 {
animation: pata 6s linear infinite;
transform-origin: bottom;
transform-box: fill-box;
i want the bottom right animated thing to be animated like translatedX
0 to translatedX 20px then come back to -20px then to up with translateY
-10px straight then come down to translateY 0px straight and then get back to translateX 0px.
but it is not heppening whtn it is going up and down diagonaly.
} */
#keyframes leftStob {
0% {
transform: translateX(0px);
}
20% {
transform: translateX(20px);
}
40% {
transform: translateX(-20px);
}
60% {
transform: translate(-20px,-10px);
}
80% {
transform: translate(-20px, 0px);
}
100% {
transform: translateX(0px);
}
}
#keyframes pata {
0% {
transform: rotateZ(0deg);
}
25% {
transform: rotateZ(5deg);
}
50% {
transform: rotateZ(0deg);
}
75% {
transform: rotateZ(-5deg);
}
100% {
transform: rotateZ(0deg);
}
}
</style>
</head>
<body>
<div id="wrapper">
<svg
width="646"
height="479"
viewBox="0 0 646 479"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="undraw_Social_life_re_x7t5 1" clip-path="url(#clip0)">
<g id="stob2">
<path
id="Vector"
d="M39.8701 476.965C39.8701 467.152 43.7683 457.741 50.7071 450.802C57.646 443.863 67.0571 439.965 76.8701 439.965C86.6831 439.965 96.0942 443.863 103.033 450.802C109.972 457.741 113.87 467.152 113.87 476.965"
fill="#46BB0F"
/>
</g>
<g id="stob1">
<path
id="Vector_2"
d="M153.87 476.965C153.87 467.152 157.768 457.741 164.707 450.802C171.646 443.863 181.057 439.965 190.87 439.965C200.683 439.965 210.094 443.863 217.033 450.802C223.972 457.741 227.87 467.152 227.87 476.965"
fill="#46BB0F"
/>
</g>
<g id="like2">
<path
id="Vector_3"
d="M230.87 144.402C227.903 144.402 225.003 145.282 222.537 146.93C220.07 148.578 218.147 150.921 217.012 153.662C215.877 156.402 215.58 159.418 216.158 162.328C216.737 165.238 218.166 167.911 220.264 170.008C222.361 172.106 225.034 173.535 227.944 174.114C230.853 174.692 233.869 174.395 236.61 173.26C239.351 172.125 241.694 170.202 243.342 167.735C244.99 165.269 245.87 162.369 245.87 159.402C245.87 155.424 244.29 151.608 241.477 148.795C238.664 145.982 234.848 144.402 230.87 144.402V144.402ZM227.279 165.951C227.279 166.063 227.234 166.171 227.155 166.25C227.076 166.329 226.968 166.374 226.856 166.374H223.476C223.364 166.374 223.256 166.329 223.177 166.25C223.098 166.171 223.053 166.063 223.053 165.951V157.923C223.053 157.811 223.098 157.703 223.177 157.624C223.256 157.545 223.364 157.5 223.476 157.5H226.856C226.968 157.5 227.076 157.545 227.155 157.624C227.234 157.703 227.279 157.811 227.279 157.923V165.951ZM238.687 159.613C238.687 159.949 238.553 160.272 238.316 160.509C238.078 160.747 237.756 160.881 237.419 160.881V160.902C237.658 160.951 237.872 161.08 238.026 161.269C238.18 161.458 238.264 161.694 238.264 161.937C238.264 162.181 238.18 162.417 238.026 162.605C237.872 162.794 237.658 162.923 237.419 162.972V163.416C237.644 163.416 237.858 163.505 238.017 163.663C238.175 163.822 238.264 164.037 238.264 164.261C238.264 164.485 238.175 164.7 238.017 164.859C237.858 165.017 237.644 165.106 237.419 165.106H228.969C228.857 165.106 228.749 165.062 228.67 164.982C228.591 164.903 228.546 164.796 228.546 164.684V157.923C228.546 155.81 231.926 152.852 231.926 152.852V151.822C231.926 151.509 232.041 151.207 232.249 150.972C232.456 150.738 232.743 150.588 233.054 150.551C233.365 150.514 233.679 150.593 233.936 150.772C234.193 150.951 234.375 151.218 234.448 151.522L234.462 151.585C234.626 153.074 234.263 154.573 233.435 155.822H236.036C236.075 155.818 236.112 155.81 236.152 155.81H237.419C237.083 156.483 237.028 157.261 237.266 157.974C237.503 158.687 238.015 159.277 238.687 159.613V159.613Z"
fill="#5E90FF"
/>
</g>
<g id="like1">
<path
id="Vector_4"
d="M252.87 51.4018C248.717 51.4018 244.657 52.6334 241.203 54.9409C237.75 57.2484 235.058 60.5282 233.469 64.3654C231.879 68.2027 231.463 72.4251 232.274 76.4987C233.084 80.5723 235.084 84.3141 238.021 87.251C240.958 90.1879 244.7 92.188 248.773 92.9983C252.847 93.8086 257.069 93.3927 260.906 91.8033C264.744 90.2138 268.023 87.5222 270.331 84.0688C272.638 80.6153 273.87 76.5552 273.87 72.4018C273.87 66.8322 271.658 61.4908 267.719 57.5526C263.781 53.6143 258.44 51.4018 252.87 51.4018ZM247.842 81.5708C247.842 81.7277 247.78 81.8781 247.669 81.9891C247.558 82.1 247.407 82.1623 247.25 82.1623H242.518C242.361 82.1623 242.211 82.1 242.1 81.9891C241.989 81.8781 241.926 81.7277 241.926 81.5708V70.3314C241.926 70.1745 241.989 70.024 242.1 69.9131C242.211 69.8021 242.361 69.7398 242.518 69.7398H247.25C247.407 69.7398 247.558 69.8021 247.669 69.9131C247.78 70.024 247.842 70.1745 247.842 70.3314V81.5708ZM263.814 72.6975C263.814 73.1682 263.627 73.6196 263.294 73.9524C262.961 74.2852 262.51 74.4722 262.039 74.4722V74.502C262.373 74.5702 262.673 74.7517 262.889 75.0157C263.104 75.2798 263.222 75.6102 263.222 75.9511C263.222 76.292 263.104 76.6224 262.889 76.8864C262.673 77.1505 262.373 77.3319 262.039 77.4001V78.0215C262.353 78.0215 262.654 78.1461 262.876 78.368C263.098 78.5899 263.222 78.8908 263.222 79.2046C263.222 79.5184 263.098 79.8193 262.876 80.0412C262.654 80.263 262.353 80.3877 262.039 80.3877H250.208C250.051 80.3877 249.901 80.3254 249.79 80.2144C249.679 80.1035 249.617 79.953 249.617 79.7961V70.3314C249.617 67.3736 254.349 63.2328 254.349 63.2328V61.7906C254.348 61.3521 254.509 60.9287 254.8 60.6006C255.091 60.2726 255.492 60.0627 255.928 60.0109C256.363 59.9591 256.802 60.069 257.162 60.3196C257.522 60.5702 257.777 60.9442 257.88 61.3706C257.886 61.3994 257.892 61.4286 257.898 61.4581C258.49 64.4159 256.461 67.3899 256.461 67.3899H260.103C260.157 67.385 260.209 67.3736 260.264 67.3736H262.039C262.51 67.3736 262.961 67.5606 263.294 67.8934C263.627 68.2262 263.814 68.6776 263.814 69.1483C263.814 69.6189 263.627 70.0703 263.294 70.4031C262.961 70.7359 262.51 70.9229 262.039 70.9229C262.51 70.9229 262.961 71.1099 263.294 71.4427C263.627 71.7755 263.814 72.2269 263.814 72.6975Z"
fill="#5E90FF"
/>
</g>
<g id="mobile">
<path
id="Vector_5"
d="M258.702 209.928L282.994 227.126C283.305 227.352 283.68 227.474 284.064 227.474C284.449 227.474 284.824 227.352 285.135 227.126L291.699 222.198C291.917 222.038 292.097 221.831 292.224 221.593C292.351 221.354 292.423 221.09 292.435 220.82C292.446 220.55 292.396 220.281 292.289 220.033C292.182 219.784 292.021 219.563 291.817 219.386L273.124 202.717C272.879 202.503 272.581 202.357 272.26 202.295C271.94 202.233 271.609 202.257 271.301 202.364L259.138 206.717C258.825 206.832 258.55 207.03 258.342 207.29C258.133 207.55 258 207.862 257.955 208.192C257.91 208.522 257.956 208.858 258.088 209.164C258.219 209.469 258.432 209.734 258.702 209.928H258.702Z"
fill="#3F3D56"
/>
<path
id="Vector_6"
d="M260.91 208.601L282.802 224.1C282.911 224.183 283.045 224.229 283.183 224.23C283.32 224.231 283.455 224.188 283.566 224.107L289.47 219.675C289.537 219.627 289.594 219.566 289.638 219.496C289.682 219.426 289.711 219.347 289.725 219.266C289.738 219.184 289.735 219.101 289.716 219.02C289.697 218.94 289.663 218.864 289.614 218.797C289.587 218.76 289.556 218.727 289.522 218.697L272.662 203.662C272.574 203.587 272.468 203.536 272.354 203.515C272.24 203.494 272.123 203.503 272.014 203.542L261.058 207.462C260.948 207.504 260.852 207.576 260.779 207.668C260.707 207.761 260.66 207.871 260.645 207.988C260.63 208.104 260.647 208.223 260.693 208.331C260.74 208.439 260.815 208.533 260.91 208.602V208.601Z"
fill="white"
/>
</g>
<g id="body">
<path
id="Vector_7"
d="M299.623 297.6C301.153 297.244 302.586 296.558 303.822 295.589C305.057 294.62 306.066 293.391 306.776 291.991C307.485 290.59 307.879 289.05 307.93 287.48C307.98 285.911 307.686 284.349 307.067 282.905L346.67 193.433L324.015 187.727L292.211 277.47C289.855 278.669 288.02 280.692 287.055 283.153C286.09 285.615 286.062 288.345 286.976 290.827C287.889 293.308 289.681 295.368 292.012 296.616C294.343 297.865 297.051 298.215 299.623 297.6V297.6Z"
fill="#A0616A"
/>
<path
id="Vector_8"
d="M335.309 221.435L313.275 211.121C312.648 210.828 312.092 210.403 311.644 209.875C311.196 209.347 310.868 208.729 310.68 208.062C310.493 207.396 310.451 206.697 310.558 206.013C310.666 205.329 310.919 204.677 311.301 204.1L324.691 183.877C326.212 180.68 328.938 178.216 332.272 177.026C335.606 175.835 339.276 176.014 342.478 177.525C345.68 179.035 348.153 181.753 349.354 185.083C350.556 188.413 350.389 192.083 348.889 195.29L341.965 218.453C341.767 219.116 341.428 219.729 340.971 220.249C340.515 220.769 339.951 221.185 339.32 221.468C338.688 221.751 338.003 221.895 337.31 221.889C336.618 221.883 335.935 221.728 335.309 221.435H335.309Z"
fill="#FF63E5"
/>
<path
id="Vector_9"
d="M347.236 466.333L334.976 466.332L329.144 419.044L347.238 419.045L347.236 466.333Z"
fill="#A0616A"
/>
<path
id="Vector_10"
d="M350.363 478.217L310.832 478.216V477.716C310.832 475.695 311.23 473.694 312.003 471.828C312.776 469.961 313.91 468.265 315.339 466.836C316.767 465.407 318.464 464.274 320.33 463.501C322.197 462.727 324.198 462.329 326.219 462.329H326.22L350.363 462.33L350.363 478.217Z"
fill="#2F2E41"
/>
<path
id="Vector_11"
d="M388.236 466.333L375.976 466.332L370.144 419.044L388.238 419.045L388.236 466.333Z"
fill="#A0616A"
/>
<path
id="Vector_12"
d="M391.363 478.217L351.832 478.216V477.716C351.832 475.695 352.23 473.694 353.003 471.828C353.776 469.961 354.91 468.265 356.339 466.836C357.767 465.407 359.464 464.274 361.33 463.501C363.197 462.727 365.198 462.329 367.219 462.329H367.22L391.363 462.33L391.363 478.217Z"
fill="#2F2E41"
/>
<path
id="Vector_13"
d="M387.675 453.178C387.564 453.178 387.453 453.174 387.342 453.166L373.243 452.122C372.277 452.046 371.361 451.662 370.629 451.027C369.897 450.391 369.389 449.538 369.178 448.592L344.698 314.22C344.617 313.848 344.398 313.521 344.086 313.305C343.773 313.089 343.39 313 343.014 313.055C342.637 313.111 342.296 313.307 342.06 313.604C341.823 313.902 341.708 314.278 341.737 314.657L350.43 447.05C350.478 447.668 350.398 448.291 350.195 448.877C349.992 449.463 349.669 450.001 349.248 450.457C348.827 450.913 348.315 451.277 347.747 451.525C347.178 451.774 346.564 451.902 345.944 451.902H335.208C334.302 451.903 333.418 451.63 332.67 451.119C331.922 450.609 331.345 449.885 331.015 449.042C304.015 378.336 313.792 239.795 313.87 238.402L314.87 237.402L368.648 246.687L368.762 246.798C387.136 260.294 395.088 418.348 392.167 448.414C392.148 449.691 391.677 450.92 390.837 451.882C389.994 452.712 388.858 453.178 387.675 453.178V453.178Z"
fill="#2F2E41"
/>
<path
id="Vector_14"
d="M376.404 269.505C376.154 269.505 375.904 269.48 375.659 269.43L312.581 261.336C310.323 260.88 308.711 258.47 308.833 255.728L314.87 222.402C306.87 212.402 314.429 186.576 319.318 180.046L317.427 174.93C316.94 173.602 316.91 172.149 317.343 170.801C317.715 169.533 318.567 168.46 319.719 167.812L345.318 154.21C347.588 153.004 350.25 154.239 351.256 156.959L356.276 170.545L356.199 170.585C368.219 177.028 378.87 183.402 370.87 217.402L380.9 264.358C380.866 265.839 380.27 267.251 379.231 268.307C378.481 269.06 377.467 269.49 376.404 269.505Z"
fill="#FF63E5"
/>
<path
id="Vector_15"
d="M287.403 214.455C287.806 214.834 288.179 215.244 288.517 215.682L337.993 212.263L343.3 201.448L360.67 207.324L353.135 227.385C352.526 229.005 351.408 230.385 349.949 231.316C348.489 232.247 346.767 232.68 345.041 232.549L288.781 228.282C287.535 230.012 285.793 231.322 283.785 232.037C281.777 232.752 279.598 232.84 277.54 232.287C275.481 231.734 273.639 230.567 272.26 228.942C270.88 227.317 270.028 225.311 269.817 223.189C269.605 221.068 270.045 218.933 271.077 217.068C272.108 215.202 273.684 213.696 275.593 212.747C277.502 211.799 279.655 211.455 281.764 211.76C283.874 212.065 285.841 213.005 287.403 214.455V214.455Z"
fill="#A0616A"
/>
<path
id="Vector_16"
d="M337.099 209.879C336.853 209.281 336.739 208.637 336.764 207.991C336.789 207.344 336.953 206.711 337.245 206.134L347.448 185.985C348.493 182.846 350.739 180.249 353.696 178.764C356.652 177.279 360.077 177.027 363.219 178.062C366.36 179.098 368.964 181.338 370.457 184.29C371.951 187.242 372.213 190.665 371.186 193.81L367.256 216.126C367.144 216.763 366.896 217.368 366.529 217.9C366.162 218.432 365.684 218.879 365.129 219.21C364.573 219.542 363.953 219.749 363.31 219.819C362.667 219.889 362.017 219.819 361.403 219.615L339.839 212.436C339.226 212.232 338.663 211.898 338.19 211.456C337.717 211.015 337.345 210.477 337.099 209.879Z"
fill="#FF63E5"
/>
</g>
<g id="love3">
<path
id="Vector_17"
d="M262.48 196.17C262.277 196.36 262.01 196.465 261.732 196.465C261.455 196.465 261.188 196.36 260.985 196.17L260.411 195.651C255.713 191.341 253 188.54 253 185.049C253 182.201 254.802 180 257.628 180C258.412 180.004 259.184 180.179 259.893 180.512C260.602 180.844 261.23 181.327 261.734 181.927C262.237 181.327 262.865 180.845 263.573 180.512C264.281 180.179 265.054 180.005 265.836 180C268.666 180 270.465 182.194 270.465 185.049C270.465 188.533 267.752 191.334 263.054 195.651L262.48 196.17Z"
fill="#FF6584"
/>
</g>
<g id="love2">
<path
id="Vector_18"
d="M225.57 133.698C225.181 134.061 224.669 134.262 224.138 134.262C223.606 134.262 223.094 134.061 222.705 133.698L221.605 132.704C212.603 124.444 207.406 119.078 207.406 112.388C207.406 106.931 210.859 102.714 216.274 102.714C217.775 102.722 219.255 103.057 220.614 103.694C221.972 104.332 223.176 105.257 224.141 106.406C225.105 105.257 226.308 104.332 227.665 103.695C229.022 103.057 230.502 102.722 232.001 102.714C237.423 102.714 240.87 106.917 240.87 112.388C240.87 119.064 235.672 124.43 226.67 132.704L225.57 133.698Z"
fill="#FF6584"
/>
</g>
<g id="love1">
<path
id="Vector_19"
d="M226.999 40.2437C226.493 40.7144 225.828 40.9762 225.138 40.9762C224.447 40.9762 223.782 40.7144 223.277 40.2437L221.849 38.9517C210.157 28.2243 203.406 21.2547 203.406 12.5654C203.406 5.47747 207.891 3.05176e-05 214.924 3.05176e-05C216.873 0.0111436 218.797 0.445725 220.561 1.27367C222.325 2.10161 223.888 3.30314 225.142 4.79504C226.395 3.30336 227.956 2.10188 229.719 1.2739C231.482 0.445914 233.404 0.0112366 235.351 3.05176e-05C242.394 3.05176e-05 246.87 5.45928 246.87 12.5654C246.87 21.2365 240.119 28.2061 228.427 38.9517L226.999 40.2437Z"
fill="#FF6584"
/>
</g>
<g id="floor">
<path
id="Vector_20"
d="M645 478.402H1C0.734784 478.402 0.480444 478.296 0.292908 478.109C0.105371 477.921 0 477.667 0 477.402C0 477.137 0.105371 476.882 0.292908 476.695C0.480444 476.507 0.734784 476.402 1 476.402H645C645.265 476.402 645.52 476.507 645.707 476.695C645.895 476.882 646 477.137 646 477.402C646 477.667 645.895 477.921 645.707 478.109C645.52 478.296 645.265 478.402 645 478.402Z"
fill="#CCCCCC"
/>
</g>
<g id="head">
<path
id="Vector_21"
d="M320.074 156.357C333.639 156.357 344.635 145.361 344.635 131.796C344.635 118.231 333.639 107.235 320.074 107.235C306.509 107.235 295.513 118.231 295.513 131.796C295.513 145.361 306.509 156.357 320.074 156.357Z"
fill="#A0616A"
/>
<path
id="Vector_22"
d="M333.87 112.402C344.916 112.402 353.87 103.447 353.87 92.4018C353.87 81.3561 344.916 72.4018 333.87 72.4018C322.824 72.4018 313.87 81.3561 313.87 92.4018C313.87 103.447 322.824 112.402 333.87 112.402Z"
fill="#352404"
/>
<path
id="Vector_23"
d="M296.823 134.833C294.869 135.039 292.792 135.225 291.034 134.347C290.093 133.814 289.292 133.066 288.695 132.165C288.098 131.264 287.721 130.235 287.596 129.161C283.87 104.402 304.923 106.438 307.414 105.366C309.088 104.645 310.321 103.194 311.817 102.153C315.089 99.8756 319.334 99.7091 323.32 99.6232C328.051 99.5211 332.954 99.4509 337.297 101.332C341.202 103.162 344.447 106.153 346.588 109.896C348.707 113.623 350.259 117.645 351.195 121.829C352.399 126.616 353.218 131.68 351.978 136.457C350.955 140.089 348.823 143.31 345.878 145.669C342.934 148.029 339.326 149.408 335.559 149.616C337.175 143.909 333.648 137.583 328.416 134.79C324.194 132.714 319.39 132.142 314.799 133.169C311.821 133.772 308.802 134.148 305.767 134.294C302.789 134.405 299.214 134.58 296.823 134.833Z"
fill="#352404"
/>
</g>
<g id="pata1">
<path
id="Vector_24"
d="M616.896 203.791C616.896 155.527 577.745 41 529.448 41C481.152 41 442 155.527 442 203.791C442.018 226.972 451.239 249.198 467.636 265.583C484.034 281.969 506.267 291.173 529.448 291.173C552.63 291.173 574.862 281.969 591.26 265.583C607.658 249.198 616.879 226.972 616.896 203.791V203.791Z"
fill="#46BB0F"
/>
</g>
<g id="wood">
<path
id="Vector_25"
d="M530.164 477.402C529.898 477.402 529.644 477.296 529.456 477.109C529.269 476.921 529.164 476.667 529.164 476.402V200.261C529.164 199.996 529.269 199.742 529.456 199.554C529.644 199.367 529.898 199.261 530.164 199.261C530.429 199.261 530.683 199.367 530.871 199.554C531.058 199.742 531.164 199.996 531.164 200.261V476.402C531.163 476.667 531.058 476.921 530.871 477.109C530.683 477.296 530.429 477.402 530.164 477.402V477.402Z"
fill="#CAC0C0"
/>
</g>
</g>
<defs>
<clipPath id="clip0">
<rect width="646" height="478.402" fill="white" />
</clipPath>
</defs>
</svg>
</div>
</body>
</html>
css transition duration doesn't work with vector-effect: non-scaling-stroke
I have two svgs with different viewports. I use vector-effect: non-scaling-stroke to make stroke-width the same for both svgs.
The problem is that when I use vector-effect: non-scaling-stroke, duration of css transition doesn't work.
#circleStroke {
transition: stroke-dashoffset 800ms cubic-bezier(0, 0.25, 0.01, 0.99),
stroke 800ms;
stroke-dashoffset: 337.6;
stroke-dasharray: 337.6 339.6;
}
Example with working animation without vector-effect: non-scaling-stroke rule.
document.getElementById("pause").addEventListener("click", function( event ) {
var element = document.getElementById("circleStroke");
if (element.classList.contains("play")) {
element.classList.remove("play");
} else {
element.classList.add("play");
}
}, false);
.fst-wrapper, .snd-wrapper{
width: 90px;
height: 90px;
}
#circleStroke {
fill: none;
paint-order: 'markers fill stroke';
stroke-linecap: 'square';
stroke-linejoin: 'round';
stroke: black;
stroke-width: 2;
}
#circleStroke {
transition: stroke-dashoffset 800ms cubic-bezier(0, 0.25, 0.01, 0.99),
stroke 800ms;
stroke-dashoffset: 337.6;
stroke-dasharray: 337.6 339.6;
}
#circleStroke.play {
stroke-dashoffset: 0;
}
.vert-line{
fill: none;
stroke-width: 2;
}
#line2{
stroke-width: 2;
}
.vert-line, #circleStroke, #line2 {
/* vector-effect: non-scaling-stroke; */
}
<div class="fst-wrapper">
<svg
id="pause"
viewBox="-20 -20 140 140"
>
<g id="svgG">
<path
id="circleStroke"
strokeDasharray="337"
strokeDashoffset="5"
d="m50.43 99.993c0.99612-0.0138 1.9932-0.0275 3.0399-0.0826 1.0466-0.0551 2.1437-0.15152 2.9586-0.23417 0.81481-0.0827 1.3473-0.15151 2.1502-0.28228 0.80289-0.13078 1.8779-0.32373 2.9836-0.56921s2.2453-0.54417 3.1424-0.79657 1.5542-0.45918 2.1703-0.6699 1.1971-0.42742 1.7772-0.65442 1.1643-0.4662 1.8177-0.75048c0.65338-0.28429 1.3802-0.61548 2.1699-1.0081 0.78978-0.39265 1.6431-0.84684 2.3336-1.2277s1.2191-0.6888 1.7383-1.0059c0.51918-0.31707 1.0278-0.64239 1.6398-1.0596 0.61199-0.41718 1.3297-0.92787 2.0269-1.4531 0.69718-0.5252 1.3776-1.0677 1.9635-1.5506s1.085-0.91269 1.6077-1.3918 1.0747-1.0128 1.5586-1.4944c0.48388-0.48161 0.90238-0.9139 1.3952-1.4457 0.49278-0.53176 1.0633-1.1667 1.514-1.6909 0.4507-0.52413 0.78405-0.94025 1.1313-1.3883 0.34723-0.44809 0.71082-0.93135 1.0513-1.3968s0.66022-0.91632 1.0006-1.4206c0.34035-0.50425 0.70391-1.0657 1.0616-1.6446 0.35766-0.57893 0.71185-1.1792 0.95067-1.5926s0.36248-0.64011 0.56142-1.0186c0.19894-0.37846 0.47581-0.91374 0.71197-1.3872 0.23616-0.4735 0.43399-0.88986 0.68371-1.442s0.55356-1.245 0.83446-1.9341 0.54071-1.3789 0.80668-2.1424c0.26597-0.76356 0.53958-1.6051 0.74142-2.2715 0.20185-0.6664 0.33286-1.1606 0.45322-1.6237 0.12036-0.46311 0.23079-0.89794 0.33049-1.3151 0.0997-0.41717 0.18946-0.81992 0.29026-1.3263s0.21359-1.1209 0.30414-1.6574 0.15958-0.999 0.21244-1.376c0.05285-0.37703 0.08942-0.66726 0.1352-1.0862 0.04578-0.41897 0.10108-0.96961 0.14235-1.4386 0.04127-0.46897 0.06887-0.85993 0.0975-1.4006 0.02863-0.54071 0.05856-1.2358 0.07117-1.9536 0.01261-0.71783 8e-3 -1.4717-0.01037-2.1484-0.01836-0.67666-0.05054-1.2834-0.08725-1.804-0.03671-0.52065-0.07809-0.95741-0.13769-1.5236s-0.1378-1.2654-0.23185-1.9489c-0.09405-0.68352-0.20436-1.3546-0.32364-2.045-0.11928-0.69041-0.24796-1.4028-0.3581-1.9304-0.11014-0.52765-0.20205-0.87231-0.33958-1.3903-0.13753-0.51803-0.32151-1.2126-0.47524-1.7471-0.15372-0.53455-0.27779-0.91134-0.45892-1.4547-0.18113-0.54338-0.42021-1.256-0.65423-1.8961s-0.46373-1.2098-0.67939-1.7305c-0.21566-0.52078-0.41782-0.99402-0.6151-1.4345-0.19729-0.44044-0.39028-0.84941-0.61966-1.3081-0.22938-0.45874-0.4959-0.96881-0.74315-1.429s-0.47802-0.87558-0.73267-1.3298c-0.25465-0.45424-0.5349-0.95041-0.83774-1.4506-0.30284-0.50014-0.62898-1.0054-0.93416-1.4666-0.30518-0.46122-0.58993-0.87915-1.0204-1.4608-0.43047-0.58164-1.0109-1.3325-1.4813-1.92-0.47046-0.5875-0.83317-1.0145-1.1981-1.4391s-0.7322-0.84696-1.1648-1.3117c-0.43255-0.4647-0.92615-0.96744-1.4862-1.5183-0.56001-0.55083-1.1843-1.1476-1.8476-1.7374-0.66329-0.58985-1.3656-1.1728-2.0197-1.6938-0.65415-0.52103-1.26-0.98-1.8797-1.4276-0.61974-0.4476-1.2531-0.88358-1.9899-1.3565-0.73686-0.47288-1.5766-0.98224-2.2974-1.4s-1.3219-0.74358-1.9785-1.0788c-0.6566-0.3352-1.3677-0.67927-1.9049-0.93409-0.53717-0.25481-0.8996-0.41997-1.444-0.64508-0.54438-0.22511-1.2688-0.50936-1.8863-0.74124s-1.1267-0.41078-1.7222-0.60389c-0.59545-0.19311-1.2728-0.39906-2.0329-0.61492-0.76008-0.21586-1.5993-0.44058-2.3088-0.61233s-1.2964-0.29191-1.8522-0.39717c-0.55583-0.10526-1.0921-0.19772-1.841-0.30341-0.74893-0.10568-1.7115-0.22486-2.7126-0.31901-1.0011-0.09416-2.0376-0.16295-3.0594-0.202s-2.0262-0.04822-2.9745-0.02298c-0.94832 0.02524-1.838 0.08485-2.7175 0.15833-0.87956 0.07348-1.7461 0.16059-2.6257 0.28229s-1.769 0.27758-2.6923 0.4613c-0.92327 0.18372-1.8768 0.39461-2.7748 0.61965-0.89792 0.22504-1.7369 0.46344-2.6787 0.76663-0.94176 0.30318-1.9823 0.6699-3.0893 1.1108-1.107 0.44092-2.2762 0.95445-3.0889 1.3286-0.81274 0.37419-1.2667 0.60806-1.8046 0.89539s-1.156 0.62612-1.7395 0.96381c-0.58352 0.33768-1.1287 0.67214-1.7262 1.0559-0.59746 0.38374-1.2433 0.81431-1.9287 1.2956-0.68543 0.48134-1.4124 1.0151-2.1498 1.5962-0.73736 0.58113-1.4844 1.209-2.2907 1.9372-0.80626 0.72814-1.668 1.5532-2.2374 2.1203-0.56941 0.56706-0.84451 0.87425-1.2102 1.2837s-0.81861 0.91721-1.3998 1.6138c-0.58117 0.69656-1.278 1.5665-1.7747 2.2196-0.49672 0.65314-0.7841 1.0774-1.0034 1.389-0.21932 0.31158-0.36359 0.50095-0.53406 0.75199-0.17046 0.25104-0.36214 0.55682-0.55798 0.87236-0.19584 0.31555-0.3932 0.63664-0.56231 0.9167s-0.30818 0.51615-0.46066 0.78134-0.3182 0.55926-0.4906 0.87072-0.35021 0.63797-0.48981 0.9001-0.2402 0.45845-0.33298 0.644-0.17666 0.35814-0.28339 0.57162-0.23406 0.4633-0.35447 0.71871-0.23186 0.51223-0.33432 0.74724-0.19453 0.44501-0.26934 0.61334c-0.074809 0.16833-0.13129 0.29259-0.20642 0.46977s-0.16675 0.40221-0.26114 0.639c-0.094396 0.23679-0.18964 0.48055-0.29053 0.74253s-0.20586 0.53814-0.30426 0.80486-0.18889 0.52041-0.26777 0.74565-0.14511 0.41907-0.22983 0.67485c-0.084719 0.25578-0.18633 0.56869-0.27977 0.86926-0.093433 0.30057-0.17764 0.58557-0.25238 0.84388-0.07474 0.25832-0.13951 0.48824-0.23723 0.85551-0.097726 0.36727-0.22689 0.86618-0.32111 1.2471-0.094221 0.38089-0.15251 0.63996-0.23716 1.0314-0.08465 0.39149-0.19451 0.91012-0.28062 1.3512-0.08611 0.44104-0.14765 0.80054-0.2078 1.1671-0.06015 0.36657-0.11839 0.73705-0.16227 1.0385-0.043883 0.30142-0.073007 0.53118-0.10637 0.79807-0.033362 0.26689-0.07051 0.56731-0.10384 0.85019-0.033332 0.28288-0.062437 0.54483-0.086844 0.80832-0.024406 0.26348-0.0438 0.5253-0.063321 0.7937s-0.038908 0.53983-0.055987 0.80895-0.031628 0.53263-0.042202 0.76349-0.01704 0.42646-0.024365 0.65595c-0.00732 0.2295-0.015398 0.48947-0.020283 0.75129-0.00489 0.26182-0.0065 0.52209 8.184e-4 1.0185 0.00732 0.49642 0.023488 1.2223 0.041337 1.7549s0.037299 0.86807 0.062489 1.2354 0.05594 0.76386 0.084363 1.0953c0.028423 0.3314 0.054331 0.59533 0.077896 0.82694s0.044592 0.42894 0.068986 0.62577c0.024393 0.19683 0.051861 0.39072 0.079529 0.59821s0.055113 0.42544 0.08845 0.66128 0.072135 0.48641 0.11278 0.74083c0.04064 0.25442 0.082698 0.51 0.12902 0.7693s0.096478 0.51976 0.14768 0.78063c0.051198 0.26088 0.10298 0.51977 0.15173 0.7473 0.048748 0.22752 0.094056 0.4217 0.15828 0.69972 0.064221 0.27802 0.14676 0.63732 0.23287 0.99312s0.17518 0.70564 0.25802 1.011c0.08284 0.3054 0.15897 0.56455 0.2451 0.85872 0.086137 0.29416 0.18165 0.62118 0.26611 0.89651 0.084462 0.27533 0.15735 0.49724 0.25253 0.78604 0.095182 0.2888 0.21156 0.64115 0.30249 0.90587 0.090938 0.26472 0.15575 0.4397 0.281 0.76749 0.12526 0.32779 0.30969 0.80505 0.49431 1.2594 0.18461 0.45433 0.37043 0.8879 0.62542 1.4612 0.25499 0.57332 0.57921 1.2866 1.0103 2.136s0.97111 1.8383 1.4289 2.6434c0.45775 0.80512 0.83414 1.4281 1.3082 2.1587 0.47405 0.73056 1.0451 1.5676 1.7061 2.4523 0.66101 0.88472 1.4164 1.8225 2.0186 2.5417 0.60216 0.71921 1.0468 1.2154 1.5727 1.777 0.52589 0.5616 1.1296 1.1847 1.7463 1.7853 0.61676 0.60053 1.2464 1.1783 1.9541 1.7885s1.4932 1.253 2.4052 1.9443c0.912 0.6913 1.9509 1.4315 2.9766 2.1001 1.0257 0.6686 2.0386 1.266 2.9214 1.7593 0.88281 0.49333 1.6361 0.88295 2.4376 1.2724s1.6524 0.77912 2.5455 1.1473c0.8931 0.36814 1.8141 0.7095 2.5378 0.96911 0.7237 0.25962 1.2434 0.435 2.0415 0.66771s1.8896 0.52681 2.8436 0.76045c0.95407 0.23364 1.779 0.40902 2.5416 0.5545 0.76258 0.14548 1.4771 0.26348 2.1811 0.36079 0.70399 0.0973 1.4059 0.1753 2.1488 0.23692 0.74285 0.0616 1.5293 0.10712 2.4172 0.14718 0.88789 0.0401 1.8805 0.0748 2.2983 0.68533 0.41776 0.61051 0.26265 1.7979 0.19575 5.049-0.06689 3.251-0.04542 18.453-0.02395 23.769"
/>
<path
id="line2"
d="M 38 30 L 70 50 L 38 70"
rx="10"
ry="10"
/>
</g>
</svg>
</div>
<div class="snd-wrapper">
<svg class="vert-line" width="100%" height="100%" viewBox="0 0 100 100">
<path
d="M 51 0 51 19 L 51, 19 C 51, 26, 54.5, 30, 60, 30"
stroke='black'
/>
</svg>
</div>
Animation doesn't work with vector-effect: non-scaling-stroke rule.
document.getElementById("pause").addEventListener("click", function( event ) {
var element = document.getElementById("circleStroke");
if (element.classList.contains("play")) {
element.classList.remove("play");
} else {
element.classList.add("play");
}
}, false);
.fst-wrapper, .snd-wrapper{
width: 90px;
height: 90px;
}
#circleStroke {
fill: none;
paint-order: 'markers fill stroke';
stroke-linecap: 'square';
stroke-linejoin: 'round';
stroke: black;
stroke-width: 2;
}
#circleStroke {
transition: stroke-dashoffset 800ms cubic-bezier(0, 0.25, 0.01, 0.99),
stroke 800ms;
stroke-dashoffset: 337.6;
stroke-dasharray: 337.6 339.6;
}
#circleStroke.play {
stroke-dashoffset: 0;
}
.vert-line{
fill: none;
stroke-width: 2;
}
#line2{
stroke-width: 2;
}
.vert-line, #circleStroke, #line2 {
vector-effect: non-scaling-stroke;
}
<div class="fst-wrapper">
<svg
id="pause"
viewBox="-20 -20 140 140"
>
<g id="svgG">
<path
id="circleStroke"
strokeDasharray="337"
strokeDashoffset="5"
d="m50.43 99.993c0.99612-0.0138 1.9932-0.0275 3.0399-0.0826 1.0466-0.0551 2.1437-0.15152 2.9586-0.23417 0.81481-0.0827 1.3473-0.15151 2.1502-0.28228 0.80289-0.13078 1.8779-0.32373 2.9836-0.56921s2.2453-0.54417 3.1424-0.79657 1.5542-0.45918 2.1703-0.6699 1.1971-0.42742 1.7772-0.65442 1.1643-0.4662 1.8177-0.75048c0.65338-0.28429 1.3802-0.61548 2.1699-1.0081 0.78978-0.39265 1.6431-0.84684 2.3336-1.2277s1.2191-0.6888 1.7383-1.0059c0.51918-0.31707 1.0278-0.64239 1.6398-1.0596 0.61199-0.41718 1.3297-0.92787 2.0269-1.4531 0.69718-0.5252 1.3776-1.0677 1.9635-1.5506s1.085-0.91269 1.6077-1.3918 1.0747-1.0128 1.5586-1.4944c0.48388-0.48161 0.90238-0.9139 1.3952-1.4457 0.49278-0.53176 1.0633-1.1667 1.514-1.6909 0.4507-0.52413 0.78405-0.94025 1.1313-1.3883 0.34723-0.44809 0.71082-0.93135 1.0513-1.3968s0.66022-0.91632 1.0006-1.4206c0.34035-0.50425 0.70391-1.0657 1.0616-1.6446 0.35766-0.57893 0.71185-1.1792 0.95067-1.5926s0.36248-0.64011 0.56142-1.0186c0.19894-0.37846 0.47581-0.91374 0.71197-1.3872 0.23616-0.4735 0.43399-0.88986 0.68371-1.442s0.55356-1.245 0.83446-1.9341 0.54071-1.3789 0.80668-2.1424c0.26597-0.76356 0.53958-1.6051 0.74142-2.2715 0.20185-0.6664 0.33286-1.1606 0.45322-1.6237 0.12036-0.46311 0.23079-0.89794 0.33049-1.3151 0.0997-0.41717 0.18946-0.81992 0.29026-1.3263s0.21359-1.1209 0.30414-1.6574 0.15958-0.999 0.21244-1.376c0.05285-0.37703 0.08942-0.66726 0.1352-1.0862 0.04578-0.41897 0.10108-0.96961 0.14235-1.4386 0.04127-0.46897 0.06887-0.85993 0.0975-1.4006 0.02863-0.54071 0.05856-1.2358 0.07117-1.9536 0.01261-0.71783 8e-3 -1.4717-0.01037-2.1484-0.01836-0.67666-0.05054-1.2834-0.08725-1.804-0.03671-0.52065-0.07809-0.95741-0.13769-1.5236s-0.1378-1.2654-0.23185-1.9489c-0.09405-0.68352-0.20436-1.3546-0.32364-2.045-0.11928-0.69041-0.24796-1.4028-0.3581-1.9304-0.11014-0.52765-0.20205-0.87231-0.33958-1.3903-0.13753-0.51803-0.32151-1.2126-0.47524-1.7471-0.15372-0.53455-0.27779-0.91134-0.45892-1.4547-0.18113-0.54338-0.42021-1.256-0.65423-1.8961s-0.46373-1.2098-0.67939-1.7305c-0.21566-0.52078-0.41782-0.99402-0.6151-1.4345-0.19729-0.44044-0.39028-0.84941-0.61966-1.3081-0.22938-0.45874-0.4959-0.96881-0.74315-1.429s-0.47802-0.87558-0.73267-1.3298c-0.25465-0.45424-0.5349-0.95041-0.83774-1.4506-0.30284-0.50014-0.62898-1.0054-0.93416-1.4666-0.30518-0.46122-0.58993-0.87915-1.0204-1.4608-0.43047-0.58164-1.0109-1.3325-1.4813-1.92-0.47046-0.5875-0.83317-1.0145-1.1981-1.4391s-0.7322-0.84696-1.1648-1.3117c-0.43255-0.4647-0.92615-0.96744-1.4862-1.5183-0.56001-0.55083-1.1843-1.1476-1.8476-1.7374-0.66329-0.58985-1.3656-1.1728-2.0197-1.6938-0.65415-0.52103-1.26-0.98-1.8797-1.4276-0.61974-0.4476-1.2531-0.88358-1.9899-1.3565-0.73686-0.47288-1.5766-0.98224-2.2974-1.4s-1.3219-0.74358-1.9785-1.0788c-0.6566-0.3352-1.3677-0.67927-1.9049-0.93409-0.53717-0.25481-0.8996-0.41997-1.444-0.64508-0.54438-0.22511-1.2688-0.50936-1.8863-0.74124s-1.1267-0.41078-1.7222-0.60389c-0.59545-0.19311-1.2728-0.39906-2.0329-0.61492-0.76008-0.21586-1.5993-0.44058-2.3088-0.61233s-1.2964-0.29191-1.8522-0.39717c-0.55583-0.10526-1.0921-0.19772-1.841-0.30341-0.74893-0.10568-1.7115-0.22486-2.7126-0.31901-1.0011-0.09416-2.0376-0.16295-3.0594-0.202s-2.0262-0.04822-2.9745-0.02298c-0.94832 0.02524-1.838 0.08485-2.7175 0.15833-0.87956 0.07348-1.7461 0.16059-2.6257 0.28229s-1.769 0.27758-2.6923 0.4613c-0.92327 0.18372-1.8768 0.39461-2.7748 0.61965-0.89792 0.22504-1.7369 0.46344-2.6787 0.76663-0.94176 0.30318-1.9823 0.6699-3.0893 1.1108-1.107 0.44092-2.2762 0.95445-3.0889 1.3286-0.81274 0.37419-1.2667 0.60806-1.8046 0.89539s-1.156 0.62612-1.7395 0.96381c-0.58352 0.33768-1.1287 0.67214-1.7262 1.0559-0.59746 0.38374-1.2433 0.81431-1.9287 1.2956-0.68543 0.48134-1.4124 1.0151-2.1498 1.5962-0.73736 0.58113-1.4844 1.209-2.2907 1.9372-0.80626 0.72814-1.668 1.5532-2.2374 2.1203-0.56941 0.56706-0.84451 0.87425-1.2102 1.2837s-0.81861 0.91721-1.3998 1.6138c-0.58117 0.69656-1.278 1.5665-1.7747 2.2196-0.49672 0.65314-0.7841 1.0774-1.0034 1.389-0.21932 0.31158-0.36359 0.50095-0.53406 0.75199-0.17046 0.25104-0.36214 0.55682-0.55798 0.87236-0.19584 0.31555-0.3932 0.63664-0.56231 0.9167s-0.30818 0.51615-0.46066 0.78134-0.3182 0.55926-0.4906 0.87072-0.35021 0.63797-0.48981 0.9001-0.2402 0.45845-0.33298 0.644-0.17666 0.35814-0.28339 0.57162-0.23406 0.4633-0.35447 0.71871-0.23186 0.51223-0.33432 0.74724-0.19453 0.44501-0.26934 0.61334c-0.074809 0.16833-0.13129 0.29259-0.20642 0.46977s-0.16675 0.40221-0.26114 0.639c-0.094396 0.23679-0.18964 0.48055-0.29053 0.74253s-0.20586 0.53814-0.30426 0.80486-0.18889 0.52041-0.26777 0.74565-0.14511 0.41907-0.22983 0.67485c-0.084719 0.25578-0.18633 0.56869-0.27977 0.86926-0.093433 0.30057-0.17764 0.58557-0.25238 0.84388-0.07474 0.25832-0.13951 0.48824-0.23723 0.85551-0.097726 0.36727-0.22689 0.86618-0.32111 1.2471-0.094221 0.38089-0.15251 0.63996-0.23716 1.0314-0.08465 0.39149-0.19451 0.91012-0.28062 1.3512-0.08611 0.44104-0.14765 0.80054-0.2078 1.1671-0.06015 0.36657-0.11839 0.73705-0.16227 1.0385-0.043883 0.30142-0.073007 0.53118-0.10637 0.79807-0.033362 0.26689-0.07051 0.56731-0.10384 0.85019-0.033332 0.28288-0.062437 0.54483-0.086844 0.80832-0.024406 0.26348-0.0438 0.5253-0.063321 0.7937s-0.038908 0.53983-0.055987 0.80895-0.031628 0.53263-0.042202 0.76349-0.01704 0.42646-0.024365 0.65595c-0.00732 0.2295-0.015398 0.48947-0.020283 0.75129-0.00489 0.26182-0.0065 0.52209 8.184e-4 1.0185 0.00732 0.49642 0.023488 1.2223 0.041337 1.7549s0.037299 0.86807 0.062489 1.2354 0.05594 0.76386 0.084363 1.0953c0.028423 0.3314 0.054331 0.59533 0.077896 0.82694s0.044592 0.42894 0.068986 0.62577c0.024393 0.19683 0.051861 0.39072 0.079529 0.59821s0.055113 0.42544 0.08845 0.66128 0.072135 0.48641 0.11278 0.74083c0.04064 0.25442 0.082698 0.51 0.12902 0.7693s0.096478 0.51976 0.14768 0.78063c0.051198 0.26088 0.10298 0.51977 0.15173 0.7473 0.048748 0.22752 0.094056 0.4217 0.15828 0.69972 0.064221 0.27802 0.14676 0.63732 0.23287 0.99312s0.17518 0.70564 0.25802 1.011c0.08284 0.3054 0.15897 0.56455 0.2451 0.85872 0.086137 0.29416 0.18165 0.62118 0.26611 0.89651 0.084462 0.27533 0.15735 0.49724 0.25253 0.78604 0.095182 0.2888 0.21156 0.64115 0.30249 0.90587 0.090938 0.26472 0.15575 0.4397 0.281 0.76749 0.12526 0.32779 0.30969 0.80505 0.49431 1.2594 0.18461 0.45433 0.37043 0.8879 0.62542 1.4612 0.25499 0.57332 0.57921 1.2866 1.0103 2.136s0.97111 1.8383 1.4289 2.6434c0.45775 0.80512 0.83414 1.4281 1.3082 2.1587 0.47405 0.73056 1.0451 1.5676 1.7061 2.4523 0.66101 0.88472 1.4164 1.8225 2.0186 2.5417 0.60216 0.71921 1.0468 1.2154 1.5727 1.777 0.52589 0.5616 1.1296 1.1847 1.7463 1.7853 0.61676 0.60053 1.2464 1.1783 1.9541 1.7885s1.4932 1.253 2.4052 1.9443c0.912 0.6913 1.9509 1.4315 2.9766 2.1001 1.0257 0.6686 2.0386 1.266 2.9214 1.7593 0.88281 0.49333 1.6361 0.88295 2.4376 1.2724s1.6524 0.77912 2.5455 1.1473c0.8931 0.36814 1.8141 0.7095 2.5378 0.96911 0.7237 0.25962 1.2434 0.435 2.0415 0.66771s1.8896 0.52681 2.8436 0.76045c0.95407 0.23364 1.779 0.40902 2.5416 0.5545 0.76258 0.14548 1.4771 0.26348 2.1811 0.36079 0.70399 0.0973 1.4059 0.1753 2.1488 0.23692 0.74285 0.0616 1.5293 0.10712 2.4172 0.14718 0.88789 0.0401 1.8805 0.0748 2.2983 0.68533 0.41776 0.61051 0.26265 1.7979 0.19575 5.049-0.06689 3.251-0.04542 18.453-0.02395 23.769"
/>
<path
id="line2"
d="M 38 30 L 70 50 L 38 70"
rx="10"
ry="10"
/>
</g>
</svg>
</div>
<div class="snd-wrapper">
<svg class="vert-line" width="100%" height="100%" viewBox="0 0 100 100">
<path
d="M 51 0 51 19 L 51, 19 C 51, 26, 54.5, 30, 60, 30"
stroke='black'
/>
</svg>
</div>
I think the problem here doesn't lie with the transition duration. If, for example, you change the timing function from cubic-bezier() to linear you'll see that the duration value is honoured in both states. The issue therefore may lie with the bezier-values for the un/toggled state of #pause > #circleStroke.
Adding a CSS transition to #circleStroke.play may be one way of addressing this, and while something like this...
...
#circleStroke {
transition: all 800ms cubic-bezier(0, 0.25, 0.01, 0.99);
stroke-dashoffset: 337.6;
stroke-dasharray: 337.6 339.6;
}
#circleStroke.play {
transition: all 800ms cubic-bezier(0.99, 0.01, 0.25, 0);
stroke-dashoffset: 0;
}
...
... may be a little extreme it does show that each state of #pause > #circleStroke can operate to it's own transition timing function.
I generally prefer to do this sort of thing with CSS animate rather than transitions - something I picked up a while back from Jake Archbald's blog here.
Additionally, you can also use Element.classList.toggle('class') for your state-changing function...
document.getElementById("pause").addEventListener("click", function( event ) {
document.getElementById("circleStroke").classList.toggle('play');
}, false);
... Not part of the question I know, but a little tidier nonetheless.
Hoped that helps :)
SVG pixelated when using CSS3 drop-shadow filter with transform: scale
I'm displaying an world map with an inline SVG, and wanted a nice, subtle drop shadow around the country borders. I achieved this with the CSS3 filter property:
#map.shadow g#world {
-webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.25));
filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.25));
}
This totally worked... until I needed to be able to zoom the map. I'm using transform: scale() for the zoom (applied to the container, as there are marker elements & junk on top of the map), but this seems to 'bitmapize' the clean, crisp SVG. If I remove the filter drop-shadow, it goes back to being nice an crisp again.
I've tried applying the shadow a couple of different ways, including an SVG filter (as per this answer) & translateZ(0) on the element, but the result is always the same - ugly, pixelated countries. For reference:
I'm assuming this is because the filter: drop-shadow() values are in px, and since I'm scaling up the div for the zoom (to, say 1.5, or 150%), that's also scaling the filter's px... but I've got no idea how to solve it (using relational units like em or vh doesn't seem to make a difference).
I've made up a jsFiddle with an example (for code brevity, the map only contains Greenland).
Any idea how to keep my drop-shadow and nice crisp borders on the SVG?
Edit: as requested, here's a snippet:
var zoomLevel = 1;
$('#controls').on('click', '.zoombutton', function(e) {
var zoomDelta = parseFloat($(this).attr('data-delta'));
zoomLevel += zoomDelta;
$('#map').css({'transform': 'scale(' + zoomLevel + ')'});
});
$('#controls').on('click', '.shadow', function(e) {
$('#map').toggleClass('shadow');
});
#controls {
position: relative;
z-index: 1;
}
#map.shadow g#world {
-webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.25));
filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.25));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="controls">
<button type="button" class="zoombutton" data-delta="0.25">+</button>
<button type="button" class="zoombutton" data-delta="-0.25">-</button>
<button type="button" class="shadow">Toggle shadow</button>
</div>
<div id="map" class="shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="1009" height="665" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1009 665" preserveAspectRatio="xMinYMin meet">
<g id="world" class="shadow">
<path id="US" fill="#1976D2" d="M391.637.873l2.697 1.497 1.426 1.724.299-.057 1.933.657 1.835.817 3.051 2.11.428.687-.33.56-.758.384-3.899.682-7.073.833-4.047 1.605-1.287.082-.112 2.358.55.128.901-.315 3.17-2.365 1.186-.392 2.213.198 2.873.892 1.159-.313 2.067.233 2.417-.682 2.855-1.481.781 3.29 1.052 3.227.833-.354.713.18.241 1.046.39.441.808-.236 2.475.907 1.699 1.619.64.749.307 1.062.174.846-.267 1.035-1.062 1.828-1.343 1.661-1.812 1.267-2.088.789-16.045 2.611-.543.615-.322 1.559.214 2.004.75.311 1.752-1.123 3.031-1.072 2.227.051 5.324.915 1.571 2.369.831 3.574 1.842-.796.394-.611.29-1.065.231-1.151.173-1.236.193-.847.214-.451.459-.378 1.057-.457 2.772-.445.667.127.479 1.717.104.995.035 1.287-.015 1.574-.065 1.852-.236 1.812-.767 3.118-.617 1.673-.666 1.196-1.275 2.696-.442.713-1.402 3.075-.348 1.406-.021 1.021.241.194.407-.959.151-.688.262-.724 2.066-1.923.443-.54 1.352-2.326.863-.879.709-.927.376-.66 2.077-4.757 1.083-1.451 1.137-.003.201 2.449 1.363.375.592-.105.951.59.417.484.709.246.731.572.645-.615.188-.387.623-1.765.842-1.579.78-1.993.259-.487.41-.443.426-.175 1.16-.947.294-.066.626.3 2.766.156 1.509.488 2.101 1.347 1.464.733.678.646.987 1.377.796 1.429.37.417-.014.45-.275.619-1.972 2.146-.646 1.419-1.866 2.642-.912.898-.991.351-1.103.084-.716.374-.106.355.51 1.07.224.758-.032.671-.537.99-.203.223-1.938.73-.978 1.232-1.276.149-.902-.14-1.24 1.315.485 1.062.444.458 1.381.958.013.548-.66 1.101-.901 1.289-1.065.888-.4.132-.505-.223-.466.048-1.026.408-.977.065-1.745-.577-.944-.67-.497-.232-.626.064-.241.271-.987 1.593-.484 1.078-.311 1.096-.133 1.186.045 1.274.12.868.195.468.234.283.41.148.902-.14.354.08.108.254.195.802-.034.752-.164 1.052-.126 1.219-.09 1.382.048.75.365.164.171-.054.199.246.226.543.17.573.113.602-.059.495-.233.388-.525.437-1.293.859-.131.261-.102.52-.072.778-.156.705-.24.63-.218.375-.419.166-.549.022-.617.36-1.454 2.085-.022.23.544.663-.023.578-.671 2.459-.184 1.205-.146 1.638-.239 1.369-.333 1.106-.328 1.268-.322 1.424.05 1.085.423.751.559-.607.695-1.982.756-.864.816.271.711.396.908.779.76.484.656.635.271.533.272.749.002.471-.481.253-.159-.081-1.204-1.235-.586-.309-.778.372-.678.559.609 2.231.651 1.016 1.188.461.62.484.453.617.354.3.475-.132.639-.606.891-.033.402.301.291.56.131 1.042-.029 1.514-.097 1.131-.165.756-.321 1.008-.268.183-.377-.055-.351-.206-.325-.359-.492-.28-.989-.303-1-.66-.56-.163-1.185.084-1.278.418-.05.547-1.838 1.897-.377-.026-.51-.649-.714-.624-.418.004-.618.79-.154.305.008.287.455.677.185.155.235.13.817.162.355.177.334 2.076.53 1.27.227.258.2.093.65-.046.836-.427.292.342.616.417.36.104.438-.017.493.158.676 1.155-.266 1.444.423 1.147.676 1.175.16.428.065.772.015.507.051.463.086.416.089.814.093 1.206-.024.978-.143.754-.282.545-.42.338-.343-.089-.266-.516-.375-.552-.483-.588-.803-.069-1.182 1.732-.527.086-.429.171-.457.749-.673.449-.594-.178-1.043-.87.379.582.542.679.338.351.249.076.273-.081.394-.277.889-.771.235-.118.199.055.163.228.188.661.211 1.088-.027.921-.266.755-.228.483-.189.212v.167l.497.192.703-.979.223-1.226.322-1.425.569-.477.644.477.52 1.331.735 2.421.31.25.394.575.174.703-.046.829-.084.6-.122.372-.152.236-.274.15-.504.12-1.126-.251-.586-.006.073.808-1.186.692-1.337.271-1.266-.54-1.051-.833.345-1.171.197-1.31-.508-.873-.111-.019.175 1.347-.147.513-.574.623-.405.287-.036.167.199.145.129.278.061.411-.068.414-.198.417-.108.349-.018.282.181.342.381.401.413.198 1.935.086.775.215 1.838.941.082.288-.311 1.669-.17 1.588-.357.289-1.934.068-.623.246-.912.722-.876.862-.454.006-1.798-.752-.689-.504-1.48-1.434-1.114-2.206-.511.921-.313.438-.323.227-.311.035-.3-.157-.34-.347-.571-.808-.681-.803-.477-.383-.018.109.282.473.412.544 1.043 1.589.367.399-.037.283-.658.251-.8.54-.391.396-.604.958-.21.148-.904.24-.298-.058-.668-.526-1.007-.345-.593-.307-.824-.558.284.61 1.587.925.174.297-.325.552-.199.201-.378.042-.557-.115-.57.023-.583.162-.25.206.082.251.139.228.196.206.184-.002.444-.623.336-.044.889.154.899-.487.648-.211.486-.054 1.767-.749.367-.842.593-.339 1.318-.26 1.276.133.656.109.531.798.712.563.594.64.696.21.403.847 1.128.941.718.202.443.446.036 1.877.047.804-.191 2.206-.577.504.115 1.148-.151.922-.573-.349-.587-.607-1.407-.946-1.309-.611-.509-.556-.599-.432-.813-1.768-.529-2.225-.232-1.111-.445-.062-.572.298-.5.315-.239.537-1.698.736-.617.502-.352-.015-1.268.754.508.36.237.045.513-.203.308-.26 1.156-.714.928-.123.337-.309.709-.442.481-.117.067.112.052.202.339 2.703-.142.712-.382.308-.817.503-.212.244.241.426.768-.401.498-.437.266.159.435.667.491.341 1.248 1.018.591.558.832.537.94.742.245.261.859.383.184.131.355 1.296.296.144.855.082-.15.5-.835 1.105-.432.352-.107.216.041.386.025.645.174 1.18.196-1.092.137-.518.183-.155.18-.023.584-.492.587.264.152 1.239.075 1.148-.051.986.064 1.521-.022.511.139.441.144 1.816.144.542-.289.484-.893.21-.353-.238-.883.08-.0001-.426-.043-.49-.003-.343-.059-.311-.042-1.798-.25.446-.015.365-.066.371-.153 1.927-.228.47-.707-.113-.696.069-.385-.071-1.302-.875-.504-.796-.446-1.203-.275-1.131-.104-1.059-.313-.866-.52-.671-.614-.545-.708-.419-.622-.542-.536-.666-.589-.52-.644-.372-.916-.16-1.339.059-.904-.42-.215.036-.211.217.155.617 1.038.282.8.064 1.061-.04.649.158.238.355.164.63.09.902-.21.712-.763.787-.402.368-1.175.704-.398.156-.98.048-.753-.067-.991-.35-.562-.071-1.163-.047L396 176.287l.3.375.493.212.347.252.036.477-.125.705-.129.491-.213.368-.763.694-.316.219-1.422.723-.099.139.333-.019.899-.256.259.007 1.476.625 1.176-.037 2.382-.577.196.011.156.091.158.216.16.342-.192.331-.544.318-.847.313-.367.211-.351.32-.653.767-.191.792.687.3.309-.38.364-.847.328-.499.773-.339.944.172.729-.201 1.49-.843.267-.052 2.192.483 1.987.945 1.048.346 1.387.204 2.494-.093.219.148-.081.333-.145.281-.416.391-.505.258-.312.073-.266.184-.597.18-.153.146.207.636-.098.098-.526.011-.886.413-.727-.029-.152.06.138.153.146.295.155.436-.085.311-.326.185-.247.06-.853-.259-.138.039.125.187.071.284.017.382-.209.319-.436.257-.813.706-.354.201-.746.166-.157.092.303.538-.034.215-.504.579-.763.36-.104.194-.07.52-.056.207-.202.297-.724.564-.513.28-.254.229-.315.382-.397.202-.479.023-.454.143-.746.405-.52.134-1.642.696-.772.111-.668.248-1.375.661-.655.212-.454.251-.496.072-.807-.163-.435-.006-.268.099-.245.202-.405.552-.344.042-1.128-.437.023.198.298.473-.014.334-.671.339-.361.086-.533-.139-.705-.366-.905-.766-1.109-1.175-.534-.399.039.379.124.37.209.359.042.26-.124.161-.163.081-.203.0001-.035.091.331.558.261.571-.024.54-.31.51-.266.298-.222.088-1.317 1.262-.367.159-.167.155-.137.232-.383 1.035-.155.315-.308.409-.129.071-.037.167.056.262-.085.436-.225.608-.767 1.668-.618 1.542-.271.502-.198.212-.125-.076-.307.039-.149.269-.135.485-.147.369-.159.253-1.24 1.088-.319.201-.287-.127-.339.049-.703-.573-.122-.211-.454-.473.015.247.076.136.063.199.159.244.352 1.277-.278.261-.249.297-.635.501-.687.836-.253.233-.057-.681.029-.204-.388-.331.012.238-.04.222-.281.882-.078.152-.139-.034-.302.162-.309-.077-.263-.4-.104-.208-.478.571-.232-.015-.039.478-.225.435-.297.188-.415-.015-.254.257-.563-.275-.13-.517.446-.711.126-.294-.082-.363.108-.47.852-1.499.577-.764-.033-.137-.784-.167-.685-.263-.667-.09-.295.089.47.44.665.426-.327.406-.282.43-.292 1.165-.187.475-.725-.545-.343-.185.218.605.635.572.041.188-.004.677-1.216.595-1.269.09-.911.168-1.537.204h-.597l-.051.228 1.503 1.036.219.189-.209.355-.311.22-.488.757-.255.26-.632.357-1.163-.398-.598.178-.572-.125-.012.435.171.317.173.785.384-.061.488-.247.377.593.248 1 .433.505.192.39.078.367-.27.365-.559.514-.62.096.034.406-.268.291-.569-.085-.266-.204-.276-.096-1.132-.109 1.14.78.405.362.18-.214.395-.052.583.198-.097 1.306.255 1.051.031.235-.621.626-.001.583-.37.162-.398-.037-.021.637-.27.396.048.248.077.221-.246.402-.222.488-.318.426-.168-.044-.505.028-.607-.036-.492-.554-.204-.185-.23-.121.088.357.138.214.454.4.836.493-.026.349-.223.151-.521.945-.185.021-.234.243-.722-.082-.303-.097-.891.062-.303-.083-.26.04.242.266.51.239.58.24.882.181-.032.342-.221.28.127.417-.099.298-.042.354-.206.82.24.56.261.273-.03.359.123.572-.392.509-.325-.019-.463.114-.154.224.734.211-.067.379-.2.474-.21 1.021-.427 1.738-.2 1.71-.917 1.394-.325.039-.082.055-.447-.071-.702-.321-.543-.106-.367-.004-.047.16.304.258.465.108.372.171.667.159.232.308.159.328-.023.18-.0001.212.119 1.139-.314.392-.24.354-.833-.049-.145-.124-.804-.373.049.175.582.506.203.252-.136.052-.235.019-.327.17-.591-.092.033-.255.112-.263-.27.045-.301.133-.175-.049-.146.015-.083-.132-.114-.515.136-.259.487-.672.155-.362-.135-.165-.348.388-.359.615-.16.371-.225.072-.559-.187-1.591-.861.047-.525-.015-.436.464-.055.337-.19.302-.233.34-.425.312-.704-.04-.054-.915.898-.563.299-.272.055-.136-.132-.453-.288-.294-.131-.671-.214-.119-.115-.197-.092-.268-.92.346-1.124.238-.328.151-.38.085-.505-.059-.216-.202.074-.094.173.015.271-.116.188-.8.431-.802.349-.38.33-.247.257-.193.252-.295-.022-.407.051-.279.164-.408-.101-.266-.243-.321-.028-.36.117-.249-.001.021.165.166.405-.275.027-.522.016-.263-.118-.206-.154-.171-.215.103-.282.84-.518.381-.301-.249-.103-.806.093-.134-.078-.54.047.023-.775-.131-.193-.009-.091-.187-.217-.177-.054-.11-.078-.912-.175-.119-.435-.063-.449-.174-.559-.437-.146-.236-.243.188-.249.082-.316-.202-.145-.129-.223.019-.145-.164-.393-.049-.307.188-.289.516-.327.167-.132.086-.143.592-.241-.504-.17-.315-.026-.23.08-.212.32-.198.212-.772.069-.114-.11-.054-.452.044-.349.321-.492-.37-.244-.339-.08-.385-.229-.356-.242-.306-.282-.298-.333-.095-.042.107-.349.061-.288.009-.62-.12-.258.267-.532.359-.583.794-.869-.84.419-.69.911-.146.042-.051-.165-.262-.591-.197-.162-.088-.178-.393-.317-.17-.244-.242-.472-.344-.564-.489-1.117-.79-1.295-.195-.732.245-.933-.271-.646.75-.3 1.073-.337.557-.281.321-.084.682-.052.228-.283-.379.072-.255-.037-.016-.132.094-.235.061-.304-.13.055-.667.523-.986.414-.77.23-.125-.012-.27.139-.155.04-.12-.04-.272-.396-.073-.259.489-.705.365-.966.483-.635.341-.08.571.034.201.056-.064-.377.024-.183.463-.22.54-.098.384.069.242.444.311.816.419.275-.019-.391-.217-.505-.081-.778-.276-.329-.221-.162-.612.079-.368-.572-.083-.21-.009-.28-.368-.824-.118-.414-.195-.552-.104-.03.132.695.172.487.246 1.066.122.428-.165.338-.311.334-.275.199-.65.238.14-.52.089-.512-.327.182-.304.372-.105.514-.195.465-.579 1.137-.228.628-.216.309-.246.085-.213-.245-.181-.577-.085-.453-.001-1.18.023-.553-.099-.748-.313-1.753-.066-.629-.529-.335-.008-.108-.138-.36-.107-.361.088-.132.126-.095.791-.534.586-.6.701-.945.286-.294 1.028-.227.456-.031-.004-.169-.153-.067-.694.044-.925.38-.159.137-.405.589-.312.321-.878.731h-.57l-.588-.876-.657.168-.443-.058-.129-.132-.098-1.204.357-1.415-.386-.014-.08-.057-.204-.324-.133-.097.099-.172.951-.676 1.423-1.334.612-.527.378-.228.286-.261.348-.568.115-.249.194-.201.409-.227.447-.344.725-.776.095-.288-.158-.067-.339.266-.689.71-.492.398-1.679 1.771-.715.64-.389.408-.302.388-.319.276-.338.165-.72.123-.354.143-.213-.104-.094-.828.072-.492-.034-.487.18-.7.267-.497.112-.271.047-.186.55-.517.303-.229.214-.52 1.221-.185.315.019.167-.07.125-.151-.121-.117-.366-.083-.973.016-.899-.089-.41-.09-.198.052-.327-.152-.357-.291-.554-1.072.222-1.386.019-.666.704-.585.376-.194.534-.442.713-.754.851-.462.434-.086.36.066 1.332.655.685.128.602-.157.755.229 1.336.938.258-.139-.075-.227-1.49-.993.008-.298.381-.078.407-.29-.229-.172-.99.149-.286.238-.96.123-.501-.202-.45-.101-.675-.432-.565.141-.357.17-.631.161-.228.115-1.233 1.352-.519.28-.369-.092.259-.878.075-.348v-.379l.107-.521.632-.997.397-1.098.168-.685.311-.077.424.101 1.274.444 1.06.528.782.141.514.015.22-.168.174-.293.067-.203.05-.416.059-.148.172-.182.351-.635.107-.453-.115-.265-.234.027-.457.174-.062.072.008.142-.441.701-.481.161-1.107.234-.505.017-.898-.325-.136-.127-.093-.239-1.102.054-.329.072-.262-.031.128-.416.348-.463.488-1.515.409-.39.812-.364.847.059 1.465 1.177.442.102.405-.095.969-.393.178-.16.349-.489.407-.84-.02-.199-.625.47-.333.126h-.282l.262-1.542.102-1.19.098-.297.821.089 1.122-.162.267-.262-.004-.116-.45-.159-.217-.335-.377.106-.505.223-.634-.025.053-.517.465-1.089.048-.499.181-1.001.019-.516.235-.503.733-.359.308-.215.017-.236-.439-.901.111-.25.345-.228.128-.167-.088-.104-.317-.1-.488.2-.54.096-.478-.301-.374-.145-.236.045-.643.515-.225.017-.278-.143-1.842-.446-.229-.158-.66-.775-.544-.514-.724-.563-.939-.429-1.153-.294-.69-.277-.34-.392-.583-.865-.443-.724-.083-.359.26-.445.265-.32.499-.263.861.087.462.117.509.251.385.047.799-.071.813.16.481.176.632.366 1.744 1.549.728.535.316.064 1.305.57.209-.011.534-.267.053-.173-.18-.171-.576-.133-.676-.632-.419-.503-.048-.835.055-.47.105-.214.074-.723-.392-.431-.273-.136-.727-.631-.061-.157.349-.074.342.043.733.32.384.044.28-.125.032-.129-.446-.364-.558-.653-1.166-.097-.756.074-.483-.225-.514-.366-.331-.094-.675.23-.341.029-.311-.081-.307-1.16.082-.349.241-.151.182-.377.127-.395.4-.387 2.195-.865.554-.646-.024-.1-.374.12-.478.292-.319.06-1.292-.377-.202.086-.523.541-.71.585-.327-.036-.438-.346-.069-.247-.032-.297.481-.408.154-.216.311-.583-.016-.289-.531.159-.069-.269.008-.461-.051-.585-.13-.58-.436-.895-.181-.23-.149-.333-.329-1.221.095-.307.292-.233.056-.107-.697.193-.076.212.131.313.094.416.056.518.097.452.252.494.202.259.329.684.144.749-.042.393-.255.399-.412.429-.125.355-.056.353-.321.326-.197-.122-.156-.019.184.58.119.592-.143.591-.381.357-.207.011-.407.289-1.042.151-.363-.071-.665-.293-.789-.16-.313-.396-.41-.723-.207-.65-.004-.577.111-.421.226-.266.272-1.707.384-1.391.967-1.446.276-.526.091-.283-.0001-.216-.156-.137-1.189 1.795-.733.19-.219-.402.066-.716.131-.167.593.068.23-.4-.371-.606-.395-.16-.092-.153.406-.464.94.034.212-.325.34-.351.378-.654.141-.552.032-.475-.082-.384-.008-.386.064-.388-.099-.43-.261-.472-.581-.462-.171.522-.181.214-.254.048-.234-.22-.245-.079-.24-.196-.25-.063-.097-.158-.063-.444-.005-.566.282-.266.393-.209.263-.397.173-.577.025-.633-.123-.688-.319-.621-.591.604-.232.148-.053-.432-.082-.32-.248-.436-.327-.318-.314-.212-.014-.323.074-.365.14-.426.181-.893.199.08.166-.082-.096-.741-.16-.625-.188-.357-.007-.155-.043-.182-.145-.441-.163-.324-.284-.921-.205-.353-.263-.183-.283-.001-.455.244-.839.28-.665.133-.111-.073.333-.351.49-.366.648-.249.189-.612-.07-.531.027-.505-.178-.533.173-.296.59-.299.268-.046.266-.381-.748-.923-.784-.607-.196-.248-.172-.408-.148-.57-.242-.572-.334-.576-.488-.557-1.258-1.024-.432-.71-.398-1.092-.199-.468-.207-.347-.876-.816-.106-.362.905-.968.088-.388-.37-1.185-.378-.872-.412-.311-.613-.16-.562-.39-.511-.62-.51-.455-.764-.434-1.278-1.121-1.97-1.208-.88-.71-.524-.259-.69-.066-1.335-.667-1.122-.214-.692.098-.226-.111-.512-.681-.801-.392-.414.149-.514.73-.62.717-.33.097-.49-.655-.247-.459-.236-.157-.225.148-.438.603-.417.434-.617.514-.493.246-.633.06-.159.186-.244.008-.328-.168-.308-.334-.287-.501-.253-.271-.22-.04-.505.26-.639.762-.292.183-.245-.079-.3-.237-.601-.608-.333.059-.242.213.067.504.563 1.19.503.843-.425.099-3.712-1.141-.473-.276-.683-.695-.568-.428-.967-1.111-.745-.604-.247-.474-.065-.327.237-.443 1.5-1.503.573-.305 1.166-.365.275-.229.092-.182-.306-.329-1.527.118-1.36-.22-1.184-.607-.206-.202-.201-.373-.195-.544.044-.611.284-.679.167-.468.049-.254-1.488 1.672-.608.582-.482-.178-.338-.275-.166-.307.006-.339.055-.248.103-.155-.787-.694-.354-.547-.038-.566.279-.586.273-.426.267-.267.728-.232 2.658-.445 1.903.427.648-1.419.438-.455 1.28-.475 1.97-.066 1.391.263.652.335.888.737.051-.222-.214-.666-.015-.555.359-.969.165-.611-.112-.639-.39-.667-.69-.86-.372-.071-.413.208-.496.477-1.031 1.196-.487.249-.812.063-.449-.15-.434-.179-.678-.633-.247-.119-.3.278-.352.673-.339.47-.327.268-.305.116-.426-.055-1.755-1.044-.396-.467-.023-.71-.539-.691-.609-.121-.074-.232.772-1.073.576-.44-.092-.133-.836-.023-.564.573-.323.097-.743.016-.78-.287-.332-.251-.344-.578-.386-.326-1.165-.496-.263-.271-.249-.451-.952-1.283-.576-.949-.075-.541.665-1.167.029-.271-.285-.507-.119-.375.098-.519.582-1.155.216-.314 1.043-.683 1.045-.998.38-.225.339-.052 1.373.06.425-.247.361-.49.593-.498 1.237-.759 2.75-1.154.179-.137.016-.22-.247-.599-.052-.29.563-.54 1.271-.855.869-.413.559-.03.451-.185.633-.542.358-.096 2.163-.213.957.296.47-.006.302-.21.399-.617.746-1.542.393-.965.371-1.479.479-2.338.358-2.313.237-2.289.185-1.41.131-.508.449-.646.468-.506.804-.449-.073-.21-.341-.352-.317-.135-.293.081-.535.531-.693.359-.673-.056-.485.133-.445.484-.721.388-.481-.088-.869-.695-.438-.13-1.111.066-.325-.259-.284-.507-.226-.71-.169-.918.023-.959.4-1.746.153-.479 1.083-1.977.667-.933.664-.702.483-.414.456-.186.438-.438.805-1.418.831-1.225 1.034-2.301.5-.609 1.751-1.016.476-.016.404.253.383.529 1.075 2.288.084-.07-.188-.863-.392-2.609.063-1.085.615-1.168.252-.209.649.078 1.047.362.7.396.531.642.631.397.327-.02.233-.306.334-1.002.435-1.713.174-2.136-.086-2.576-.126-1.908-.168-1.214.092-1.019.527-1.231.483-.905 1.152-1.288.935-.344.554.087.729.606 1.011.371.913 1.165 1.479 2.645.981 1.312.813.586.801.993 1.184 2.084.62.886.368.32.325.051-.121-.588-.566-1.235-.866-1.371-1.921-2.493-1.059-1.784-.949-2.058-.698-1.237-1.266-1.236.017-.495 1.528-1.754 2.808-1.542 3.165-1.216 1.059.125 1.861-.511.175-.775.4-.349 1.733-1.088.497.015.763.517.813.981.376.883.511 1.505.25 2.096-.038 6.444.014 1.19.098.457.353-.681.421-1.271.379-.905.291-1.407.204-1.92.121-1.438-.495-1.64-.024-2.73.248-1.474h.693l2.867 5.035 1.128 1.067 1.284 2.617 1.5-.276 1.384.319.612-.095.302-.404-.43-1.083-1.966-3.014-.893-2.405-.625-3.051-.152-1.645.478-.298 2.196.035 3.3 1.429 4.22 4.848 2.077 1.573 3.722 5.382 1.123.798.453.167.342-.651.211-.71.016-.951-.18-1.196-.104-1.394-.026-1.597.252-3.21.6-1.061.265-1.208-.247-2.203-.703-1.526-2.737-3.997-.011-.483.553-.533.82-.313 6.783.969 1.172.354.5.347.219.457.281.195 1.457-.544-.035-.998-.182-.638-7.872-1.755-1.467-.604-.747-.046-.772.464-1.601.229-.739-.088-.958-2.115.867-2.582.73.059 1.387 1.011.822-1.414 1.304-1.178 1.29-.417 2.814-2.567.52-.226.656.138L357.099 9l.575.637.659 1.355.382.417.454.077.622.608.9-1.977.813-2.149.934-1.373 1.321.802.836 1.039.764 1.23 1.081.676 1.832 4.115.342.004.162-.344.173-.756.062-1.129.225-1.546-.163-.575-1.535-1.737-.29-.673-.294-1.115-.005-.927.285-.735.3-.337.992.306.328-.24.31-.626.373-1.181.294-.302.664-.035 1.021.76.894.064.322-.349.049-.742.078-.474.106-.2 3.24-.041.804-.178.628-.567.769-.067.672.339.832.722.827-.034 1.232-1.18L383.129 0l6.403.156L391.637.873M349.788 34.267l-.569.358-1.188-2.166-1.881-2.195-1.659-1.48-1.559-3.951-.123-1.427.221-1.262 1.361-.193 1.089-.583 2.772 2.509 1.386 2.095.47 1.693L350.035 31 349.788 34.267M423.317 39.028l-.289.635-.74-.254-.948-1.789-.632-1.483-.045-1.759.325-.788.506-.132.695 1.508.713 2.011L423.317 39.028M426.271 74.774l-1.188 1.811-1.757-.139-1.04-.834-.297-1.259.396-1.41 1.262-1.138 1.584-.715 1.436.43.198 1.423L426.271 74.774M422.384 101.829l-.372.474-.247-1.427-.223-1.922-.05-2.19.569-1.106.297-.247.198.247-.05.984v1.949l.198 1.328L422.384 101.829M425.313 106.232h-.545l-.202-.341.129-.605.759-1.966.253-.161.371.214.113 1.012-.248 1.005L425.313 106.232M274.566 110.337l-1 .113-.985-.499-.338-.387.015-.593.149-.206.532-.206.442-.046.298.092.701.366.507.365.333.114-.095.523L274.566 110.337M423.548 125.976l-.322.307-1.089-4.883v-1.803l.074-1.392.495-.108.421.751.198 2.867L423.548 125.976M425.181 133.202l.223 1.174.099 1.069.347.676.743-.096.297 1.25-.544.479-2.153-.191-.891.095-.619-.766.025-1.35.074-1.361.619-.782.52.685.619-.489L425.181 133.202M321.295 160.048l-.397.642-.323.367-.702 1.089-.121.038-.189-.141-.147-.286-.265-.069-.092-.181-.037-.147-.118-.094-.187-.059-.3.112-.275-.112-.208-.479.384-.322.237-.275.917-.108.259.126.163-.003.248-.075.542-.343.081-.16.485.201L321.295 160.048M325.454 175.874l-.263.057-.754-.439-.123-.166-.047-.203.029-.241.24-.45.451-.661.327-.124.203.415.199.556.026.281-.013.331-.052.28-.091.23L325.454 175.874M404.324 176.902l.099.505.001.238-.021.199-.055.143-.132.126.246.333.08.224.015.178-.157.344-1.118.454-.311.218-.388.539-.472.462-.157-.002-.183-.479-.746-.353-1.403.184-1.643.444-.583.207-.295-.11-.09-.166-.004-.231.194-.678.079-.173.377-.226.255-.6-.083-.655.098-.917.258-.143.645.327.417.069.739.042.993-.11.798-.374 1.456-1.07.258.014.185.38.136.186.433.291L404.324 176.902M330.674 177.469l-.375.023-.872-.155-.07-.1-.011-.189.116-.546.384-.073.457.299.493.425.068.2L330.674 177.469M327.71 185.082l.935.664.991.457.097.208.077.315.018.164-.022.152-.063.14.072.18.208.22.021.257-.248.44-.349.488-1.846.999-.653.169-1.614.682-.494-.028-.109-.032-.305-.3-.418-.279-.196-.217-.173-.312.069-.193.311-.076.442.005.649-.227-.18-.205-.17-.125-.118-.272-.271.053-.203-.156-.391-.099-1.021-.094-.666-.268-.196-.161-.173-.278-.15-.392.218-1.53.15-.392.346-.129.846.342.114-.147-.926-.568-.34-.339-.1-.268-.06-.395v-.232l.042-.234.083-.235.225-.318.938-.508 1.022.174 1.774.624.22.132.544.533L327.71 185.082M332.53 188.26l-.44.283-.089-.063-.089-.216-.227-.984-.067-.468.056-.584-.088-.413.397-.482.321-.083.433.126.733.49-.053.159-.159.255-.441.333-.156.748-.03.374.021.28L332.53 188.26M371.772 217.846l-.437.004-.145-.532.043-.582.492-.183.265.401-.095.596L371.772 217.846M345.853 247.406l-.322.694-.322-.151-.159-.31-.317-.144-.342.043-.005-.123 1.111-.742.53-.2-.038.313-.101.274L345.853 247.406" />
</g>
</svg>
</div>
One option consist of not using CSS to scale your div but instead use the SVGElement's transform attribute :
var zoomLevel = 1;
$('#controls').on('click', '.zoombutton', function(e) {
var zoomDelta = parseFloat($(this).attr('data-delta'));
zoomLevel += zoomDelta;
$('#map>svg').attr('transform', 'translate('+zoomLevel*-200+',0) scale('+zoomLevel+')');
});
$('#controls').on('click', '.shadow', function(e) {
$('#map').toggleClass('shadow');
});
#controls {
position: relative;
z-index: 1;
}
#map.shadow g#world {
-webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.25));
filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.25));
}
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="controls">
<button type="button" class="zoombutton" data-delta="0.25">+</button>
<button type="button" class="zoombutton" data-delta="-0.25">-</button>
<button type="button" class="shadow">Toggle shadow</button>
</div>
<div id="map" class="shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="1009" height="665" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1009 665" preserveAspectRatio="xMinYMin meet" currentScale="1">
<g id="world" class="shadow">
<path id="US" fill="#1976D2" d="M391.637.873l2.697 1.497 1.426 1.724.299-.057 1.933.657 1.835.817 3.051 2.11.428.687-.33.56-.758.384-3.899.682-7.073.833-4.047 1.605-1.287.082-.112 2.358.55.128.901-.315 3.17-2.365 1.186-.392 2.213.198 2.873.892 1.159-.313 2.067.233 2.417-.682 2.855-1.481.781 3.29 1.052 3.227.833-.354.713.18.241 1.046.39.441.808-.236 2.475.907 1.699 1.619.64.749.307 1.062.174.846-.267 1.035-1.062 1.828-1.343 1.661-1.812 1.267-2.088.789-16.045 2.611-.543.615-.322 1.559.214 2.004.75.311 1.752-1.123 3.031-1.072 2.227.051 5.324.915 1.571 2.369.831 3.574 1.842-.796.394-.611.29-1.065.231-1.151.173-1.236.193-.847.214-.451.459-.378 1.057-.457 2.772-.445.667.127.479 1.717.104.995.035 1.287-.015 1.574-.065 1.852-.236 1.812-.767 3.118-.617 1.673-.666 1.196-1.275 2.696-.442.713-1.402 3.075-.348 1.406-.021 1.021.241.194.407-.959.151-.688.262-.724 2.066-1.923.443-.54 1.352-2.326.863-.879.709-.927.376-.66 2.077-4.757 1.083-1.451 1.137-.003.201 2.449 1.363.375.592-.105.951.59.417.484.709.246.731.572.645-.615.188-.387.623-1.765.842-1.579.78-1.993.259-.487.41-.443.426-.175 1.16-.947.294-.066.626.3 2.766.156 1.509.488 2.101 1.347 1.464.733.678.646.987 1.377.796 1.429.37.417-.014.45-.275.619-1.972 2.146-.646 1.419-1.866 2.642-.912.898-.991.351-1.103.084-.716.374-.106.355.51 1.07.224.758-.032.671-.537.99-.203.223-1.938.73-.978 1.232-1.276.149-.902-.14-1.24 1.315.485 1.062.444.458 1.381.958.013.548-.66 1.101-.901 1.289-1.065.888-.4.132-.505-.223-.466.048-1.026.408-.977.065-1.745-.577-.944-.67-.497-.232-.626.064-.241.271-.987 1.593-.484 1.078-.311 1.096-.133 1.186.045 1.274.12.868.195.468.234.283.41.148.902-.14.354.08.108.254.195.802-.034.752-.164 1.052-.126 1.219-.09 1.382.048.75.365.164.171-.054.199.246.226.543.17.573.113.602-.059.495-.233.388-.525.437-1.293.859-.131.261-.102.52-.072.778-.156.705-.24.63-.218.375-.419.166-.549.022-.617.36-1.454 2.085-.022.23.544.663-.023.578-.671 2.459-.184 1.205-.146 1.638-.239 1.369-.333 1.106-.328 1.268-.322 1.424.05 1.085.423.751.559-.607.695-1.982.756-.864.816.271.711.396.908.779.76.484.656.635.271.533.272.749.002.471-.481.253-.159-.081-1.204-1.235-.586-.309-.778.372-.678.559.609 2.231.651 1.016 1.188.461.62.484.453.617.354.3.475-.132.639-.606.891-.033.402.301.291.56.131 1.042-.029 1.514-.097 1.131-.165.756-.321 1.008-.268.183-.377-.055-.351-.206-.325-.359-.492-.28-.989-.303-1-.66-.56-.163-1.185.084-1.278.418-.05.547-1.838 1.897-.377-.026-.51-.649-.714-.624-.418.004-.618.79-.154.305.008.287.455.677.185.155.235.13.817.162.355.177.334 2.076.53 1.27.227.258.2.093.65-.046.836-.427.292.342.616.417.36.104.438-.017.493.158.676 1.155-.266 1.444.423 1.147.676 1.175.16.428.065.772.015.507.051.463.086.416.089.814.093 1.206-.024.978-.143.754-.282.545-.42.338-.343-.089-.266-.516-.375-.552-.483-.588-.803-.069-1.182 1.732-.527.086-.429.171-.457.749-.673.449-.594-.178-1.043-.87.379.582.542.679.338.351.249.076.273-.081.394-.277.889-.771.235-.118.199.055.163.228.188.661.211 1.088-.027.921-.266.755-.228.483-.189.212v.167l.497.192.703-.979.223-1.226.322-1.425.569-.477.644.477.52 1.331.735 2.421.31.25.394.575.174.703-.046.829-.084.6-.122.372-.152.236-.274.15-.504.12-1.126-.251-.586-.006.073.808-1.186.692-1.337.271-1.266-.54-1.051-.833.345-1.171.197-1.31-.508-.873-.111-.019.175 1.347-.147.513-.574.623-.405.287-.036.167.199.145.129.278.061.411-.068.414-.198.417-.108.349-.018.282.181.342.381.401.413.198 1.935.086.775.215 1.838.941.082.288-.311 1.669-.17 1.588-.357.289-1.934.068-.623.246-.912.722-.876.862-.454.006-1.798-.752-.689-.504-1.48-1.434-1.114-2.206-.511.921-.313.438-.323.227-.311.035-.3-.157-.34-.347-.571-.808-.681-.803-.477-.383-.018.109.282.473.412.544 1.043 1.589.367.399-.037.283-.658.251-.8.54-.391.396-.604.958-.21.148-.904.24-.298-.058-.668-.526-1.007-.345-.593-.307-.824-.558.284.61 1.587.925.174.297-.325.552-.199.201-.378.042-.557-.115-.57.023-.583.162-.25.206.082.251.139.228.196.206.184-.002.444-.623.336-.044.889.154.899-.487.648-.211.486-.054 1.767-.749.367-.842.593-.339 1.318-.26 1.276.133.656.109.531.798.712.563.594.64.696.21.403.847 1.128.941.718.202.443.446.036 1.877.047.804-.191 2.206-.577.504.115 1.148-.151.922-.573-.349-.587-.607-1.407-.946-1.309-.611-.509-.556-.599-.432-.813-1.768-.529-2.225-.232-1.111-.445-.062-.572.298-.5.315-.239.537-1.698.736-.617.502-.352-.015-1.268.754.508.36.237.045.513-.203.308-.26 1.156-.714.928-.123.337-.309.709-.442.481-.117.067.112.052.202.339 2.703-.142.712-.382.308-.817.503-.212.244.241.426.768-.401.498-.437.266.159.435.667.491.341 1.248 1.018.591.558.832.537.94.742.245.261.859.383.184.131.355 1.296.296.144.855.082-.15.5-.835 1.105-.432.352-.107.216.041.386.025.645.174 1.18.196-1.092.137-.518.183-.155.18-.023.584-.492.587.264.152 1.239.075 1.148-.051.986.064 1.521-.022.511.139.441.144 1.816.144.542-.289.484-.893.21-.353-.238-.883.08-.0001-.426-.043-.49-.003-.343-.059-.311-.042-1.798-.25.446-.015.365-.066.371-.153 1.927-.228.47-.707-.113-.696.069-.385-.071-1.302-.875-.504-.796-.446-1.203-.275-1.131-.104-1.059-.313-.866-.52-.671-.614-.545-.708-.419-.622-.542-.536-.666-.589-.52-.644-.372-.916-.16-1.339.059-.904-.42-.215.036-.211.217.155.617 1.038.282.8.064 1.061-.04.649.158.238.355.164.63.09.902-.21.712-.763.787-.402.368-1.175.704-.398.156-.98.048-.753-.067-.991-.35-.562-.071-1.163-.047L396 176.287l.3.375.493.212.347.252.036.477-.125.705-.129.491-.213.368-.763.694-.316.219-1.422.723-.099.139.333-.019.899-.256.259.007 1.476.625 1.176-.037 2.382-.577.196.011.156.091.158.216.16.342-.192.331-.544.318-.847.313-.367.211-.351.32-.653.767-.191.792.687.3.309-.38.364-.847.328-.499.773-.339.944.172.729-.201 1.49-.843.267-.052 2.192.483 1.987.945 1.048.346 1.387.204 2.494-.093.219.148-.081.333-.145.281-.416.391-.505.258-.312.073-.266.184-.597.18-.153.146.207.636-.098.098-.526.011-.886.413-.727-.029-.152.06.138.153.146.295.155.436-.085.311-.326.185-.247.06-.853-.259-.138.039.125.187.071.284.017.382-.209.319-.436.257-.813.706-.354.201-.746.166-.157.092.303.538-.034.215-.504.579-.763.36-.104.194-.07.52-.056.207-.202.297-.724.564-.513.28-.254.229-.315.382-.397.202-.479.023-.454.143-.746.405-.52.134-1.642.696-.772.111-.668.248-1.375.661-.655.212-.454.251-.496.072-.807-.163-.435-.006-.268.099-.245.202-.405.552-.344.042-1.128-.437.023.198.298.473-.014.334-.671.339-.361.086-.533-.139-.705-.366-.905-.766-1.109-1.175-.534-.399.039.379.124.37.209.359.042.26-.124.161-.163.081-.203.0001-.035.091.331.558.261.571-.024.54-.31.51-.266.298-.222.088-1.317 1.262-.367.159-.167.155-.137.232-.383 1.035-.155.315-.308.409-.129.071-.037.167.056.262-.085.436-.225.608-.767 1.668-.618 1.542-.271.502-.198.212-.125-.076-.307.039-.149.269-.135.485-.147.369-.159.253-1.24 1.088-.319.201-.287-.127-.339.049-.703-.573-.122-.211-.454-.473.015.247.076.136.063.199.159.244.352 1.277-.278.261-.249.297-.635.501-.687.836-.253.233-.057-.681.029-.204-.388-.331.012.238-.04.222-.281.882-.078.152-.139-.034-.302.162-.309-.077-.263-.4-.104-.208-.478.571-.232-.015-.039.478-.225.435-.297.188-.415-.015-.254.257-.563-.275-.13-.517.446-.711.126-.294-.082-.363.108-.47.852-1.499.577-.764-.033-.137-.784-.167-.685-.263-.667-.09-.295.089.47.44.665.426-.327.406-.282.43-.292 1.165-.187.475-.725-.545-.343-.185.218.605.635.572.041.188-.004.677-1.216.595-1.269.09-.911.168-1.537.204h-.597l-.051.228 1.503 1.036.219.189-.209.355-.311.22-.488.757-.255.26-.632.357-1.163-.398-.598.178-.572-.125-.012.435.171.317.173.785.384-.061.488-.247.377.593.248 1 .433.505.192.39.078.367-.27.365-.559.514-.62.096.034.406-.268.291-.569-.085-.266-.204-.276-.096-1.132-.109 1.14.78.405.362.18-.214.395-.052.583.198-.097 1.306.255 1.051.031.235-.621.626-.001.583-.37.162-.398-.037-.021.637-.27.396.048.248.077.221-.246.402-.222.488-.318.426-.168-.044-.505.028-.607-.036-.492-.554-.204-.185-.23-.121.088.357.138.214.454.4.836.493-.026.349-.223.151-.521.945-.185.021-.234.243-.722-.082-.303-.097-.891.062-.303-.083-.26.04.242.266.51.239.58.24.882.181-.032.342-.221.28.127.417-.099.298-.042.354-.206.82.24.56.261.273-.03.359.123.572-.392.509-.325-.019-.463.114-.154.224.734.211-.067.379-.2.474-.21 1.021-.427 1.738-.2 1.71-.917 1.394-.325.039-.082.055-.447-.071-.702-.321-.543-.106-.367-.004-.047.16.304.258.465.108.372.171.667.159.232.308.159.328-.023.18-.0001.212.119 1.139-.314.392-.24.354-.833-.049-.145-.124-.804-.373.049.175.582.506.203.252-.136.052-.235.019-.327.17-.591-.092.033-.255.112-.263-.27.045-.301.133-.175-.049-.146.015-.083-.132-.114-.515.136-.259.487-.672.155-.362-.135-.165-.348.388-.359.615-.16.371-.225.072-.559-.187-1.591-.861.047-.525-.015-.436.464-.055.337-.19.302-.233.34-.425.312-.704-.04-.054-.915.898-.563.299-.272.055-.136-.132-.453-.288-.294-.131-.671-.214-.119-.115-.197-.092-.268-.92.346-1.124.238-.328.151-.38.085-.505-.059-.216-.202.074-.094.173.015.271-.116.188-.8.431-.802.349-.38.33-.247.257-.193.252-.295-.022-.407.051-.279.164-.408-.101-.266-.243-.321-.028-.36.117-.249-.001.021.165.166.405-.275.027-.522.016-.263-.118-.206-.154-.171-.215.103-.282.84-.518.381-.301-.249-.103-.806.093-.134-.078-.54.047.023-.775-.131-.193-.009-.091-.187-.217-.177-.054-.11-.078-.912-.175-.119-.435-.063-.449-.174-.559-.437-.146-.236-.243.188-.249.082-.316-.202-.145-.129-.223.019-.145-.164-.393-.049-.307.188-.289.516-.327.167-.132.086-.143.592-.241-.504-.17-.315-.026-.23.08-.212.32-.198.212-.772.069-.114-.11-.054-.452.044-.349.321-.492-.37-.244-.339-.08-.385-.229-.356-.242-.306-.282-.298-.333-.095-.042.107-.349.061-.288.009-.62-.12-.258.267-.532.359-.583.794-.869-.84.419-.69.911-.146.042-.051-.165-.262-.591-.197-.162-.088-.178-.393-.317-.17-.244-.242-.472-.344-.564-.489-1.117-.79-1.295-.195-.732.245-.933-.271-.646.75-.3 1.073-.337.557-.281.321-.084.682-.052.228-.283-.379.072-.255-.037-.016-.132.094-.235.061-.304-.13.055-.667.523-.986.414-.77.23-.125-.012-.27.139-.155.04-.12-.04-.272-.396-.073-.259.489-.705.365-.966.483-.635.341-.08.571.034.201.056-.064-.377.024-.183.463-.22.54-.098.384.069.242.444.311.816.419.275-.019-.391-.217-.505-.081-.778-.276-.329-.221-.162-.612.079-.368-.572-.083-.21-.009-.28-.368-.824-.118-.414-.195-.552-.104-.03.132.695.172.487.246 1.066.122.428-.165.338-.311.334-.275.199-.65.238.14-.52.089-.512-.327.182-.304.372-.105.514-.195.465-.579 1.137-.228.628-.216.309-.246.085-.213-.245-.181-.577-.085-.453-.001-1.18.023-.553-.099-.748-.313-1.753-.066-.629-.529-.335-.008-.108-.138-.36-.107-.361.088-.132.126-.095.791-.534.586-.6.701-.945.286-.294 1.028-.227.456-.031-.004-.169-.153-.067-.694.044-.925.38-.159.137-.405.589-.312.321-.878.731h-.57l-.588-.876-.657.168-.443-.058-.129-.132-.098-1.204.357-1.415-.386-.014-.08-.057-.204-.324-.133-.097.099-.172.951-.676 1.423-1.334.612-.527.378-.228.286-.261.348-.568.115-.249.194-.201.409-.227.447-.344.725-.776.095-.288-.158-.067-.339.266-.689.71-.492.398-1.679 1.771-.715.64-.389.408-.302.388-.319.276-.338.165-.72.123-.354.143-.213-.104-.094-.828.072-.492-.034-.487.18-.7.267-.497.112-.271.047-.186.55-.517.303-.229.214-.52 1.221-.185.315.019.167-.07.125-.151-.121-.117-.366-.083-.973.016-.899-.089-.41-.09-.198.052-.327-.152-.357-.291-.554-1.072.222-1.386.019-.666.704-.585.376-.194.534-.442.713-.754.851-.462.434-.086.36.066 1.332.655.685.128.602-.157.755.229 1.336.938.258-.139-.075-.227-1.49-.993.008-.298.381-.078.407-.29-.229-.172-.99.149-.286.238-.96.123-.501-.202-.45-.101-.675-.432-.565.141-.357.17-.631.161-.228.115-1.233 1.352-.519.28-.369-.092.259-.878.075-.348v-.379l.107-.521.632-.997.397-1.098.168-.685.311-.077.424.101 1.274.444 1.06.528.782.141.514.015.22-.168.174-.293.067-.203.05-.416.059-.148.172-.182.351-.635.107-.453-.115-.265-.234.027-.457.174-.062.072.008.142-.441.701-.481.161-1.107.234-.505.017-.898-.325-.136-.127-.093-.239-1.102.054-.329.072-.262-.031.128-.416.348-.463.488-1.515.409-.39.812-.364.847.059 1.465 1.177.442.102.405-.095.969-.393.178-.16.349-.489.407-.84-.02-.199-.625.47-.333.126h-.282l.262-1.542.102-1.19.098-.297.821.089 1.122-.162.267-.262-.004-.116-.45-.159-.217-.335-.377.106-.505.223-.634-.025.053-.517.465-1.089.048-.499.181-1.001.019-.516.235-.503.733-.359.308-.215.017-.236-.439-.901.111-.25.345-.228.128-.167-.088-.104-.317-.1-.488.2-.54.096-.478-.301-.374-.145-.236.045-.643.515-.225.017-.278-.143-1.842-.446-.229-.158-.66-.775-.544-.514-.724-.563-.939-.429-1.153-.294-.69-.277-.34-.392-.583-.865-.443-.724-.083-.359.26-.445.265-.32.499-.263.861.087.462.117.509.251.385.047.799-.071.813.16.481.176.632.366 1.744 1.549.728.535.316.064 1.305.57.209-.011.534-.267.053-.173-.18-.171-.576-.133-.676-.632-.419-.503-.048-.835.055-.47.105-.214.074-.723-.392-.431-.273-.136-.727-.631-.061-.157.349-.074.342.043.733.32.384.044.28-.125.032-.129-.446-.364-.558-.653-1.166-.097-.756.074-.483-.225-.514-.366-.331-.094-.675.23-.341.029-.311-.081-.307-1.16.082-.349.241-.151.182-.377.127-.395.4-.387 2.195-.865.554-.646-.024-.1-.374.12-.478.292-.319.06-1.292-.377-.202.086-.523.541-.71.585-.327-.036-.438-.346-.069-.247-.032-.297.481-.408.154-.216.311-.583-.016-.289-.531.159-.069-.269.008-.461-.051-.585-.13-.58-.436-.895-.181-.23-.149-.333-.329-1.221.095-.307.292-.233.056-.107-.697.193-.076.212.131.313.094.416.056.518.097.452.252.494.202.259.329.684.144.749-.042.393-.255.399-.412.429-.125.355-.056.353-.321.326-.197-.122-.156-.019.184.58.119.592-.143.591-.381.357-.207.011-.407.289-1.042.151-.363-.071-.665-.293-.789-.16-.313-.396-.41-.723-.207-.65-.004-.577.111-.421.226-.266.272-1.707.384-1.391.967-1.446.276-.526.091-.283-.0001-.216-.156-.137-1.189 1.795-.733.19-.219-.402.066-.716.131-.167.593.068.23-.4-.371-.606-.395-.16-.092-.153.406-.464.94.034.212-.325.34-.351.378-.654.141-.552.032-.475-.082-.384-.008-.386.064-.388-.099-.43-.261-.472-.581-.462-.171.522-.181.214-.254.048-.234-.22-.245-.079-.24-.196-.25-.063-.097-.158-.063-.444-.005-.566.282-.266.393-.209.263-.397.173-.577.025-.633-.123-.688-.319-.621-.591.604-.232.148-.053-.432-.082-.32-.248-.436-.327-.318-.314-.212-.014-.323.074-.365.14-.426.181-.893.199.08.166-.082-.096-.741-.16-.625-.188-.357-.007-.155-.043-.182-.145-.441-.163-.324-.284-.921-.205-.353-.263-.183-.283-.001-.455.244-.839.28-.665.133-.111-.073.333-.351.49-.366.648-.249.189-.612-.07-.531.027-.505-.178-.533.173-.296.59-.299.268-.046.266-.381-.748-.923-.784-.607-.196-.248-.172-.408-.148-.57-.242-.572-.334-.576-.488-.557-1.258-1.024-.432-.71-.398-1.092-.199-.468-.207-.347-.876-.816-.106-.362.905-.968.088-.388-.37-1.185-.378-.872-.412-.311-.613-.16-.562-.39-.511-.62-.51-.455-.764-.434-1.278-1.121-1.97-1.208-.88-.71-.524-.259-.69-.066-1.335-.667-1.122-.214-.692.098-.226-.111-.512-.681-.801-.392-.414.149-.514.73-.62.717-.33.097-.49-.655-.247-.459-.236-.157-.225.148-.438.603-.417.434-.617.514-.493.246-.633.06-.159.186-.244.008-.328-.168-.308-.334-.287-.501-.253-.271-.22-.04-.505.26-.639.762-.292.183-.245-.079-.3-.237-.601-.608-.333.059-.242.213.067.504.563 1.19.503.843-.425.099-3.712-1.141-.473-.276-.683-.695-.568-.428-.967-1.111-.745-.604-.247-.474-.065-.327.237-.443 1.5-1.503.573-.305 1.166-.365.275-.229.092-.182-.306-.329-1.527.118-1.36-.22-1.184-.607-.206-.202-.201-.373-.195-.544.044-.611.284-.679.167-.468.049-.254-1.488 1.672-.608.582-.482-.178-.338-.275-.166-.307.006-.339.055-.248.103-.155-.787-.694-.354-.547-.038-.566.279-.586.273-.426.267-.267.728-.232 2.658-.445 1.903.427.648-1.419.438-.455 1.28-.475 1.97-.066 1.391.263.652.335.888.737.051-.222-.214-.666-.015-.555.359-.969.165-.611-.112-.639-.39-.667-.69-.86-.372-.071-.413.208-.496.477-1.031 1.196-.487.249-.812.063-.449-.15-.434-.179-.678-.633-.247-.119-.3.278-.352.673-.339.47-.327.268-.305.116-.426-.055-1.755-1.044-.396-.467-.023-.71-.539-.691-.609-.121-.074-.232.772-1.073.576-.44-.092-.133-.836-.023-.564.573-.323.097-.743.016-.78-.287-.332-.251-.344-.578-.386-.326-1.165-.496-.263-.271-.249-.451-.952-1.283-.576-.949-.075-.541.665-1.167.029-.271-.285-.507-.119-.375.098-.519.582-1.155.216-.314 1.043-.683 1.045-.998.38-.225.339-.052 1.373.06.425-.247.361-.49.593-.498 1.237-.759 2.75-1.154.179-.137.016-.22-.247-.599-.052-.29.563-.54 1.271-.855.869-.413.559-.03.451-.185.633-.542.358-.096 2.163-.213.957.296.47-.006.302-.21.399-.617.746-1.542.393-.965.371-1.479.479-2.338.358-2.313.237-2.289.185-1.41.131-.508.449-.646.468-.506.804-.449-.073-.21-.341-.352-.317-.135-.293.081-.535.531-.693.359-.673-.056-.485.133-.445.484-.721.388-.481-.088-.869-.695-.438-.13-1.111.066-.325-.259-.284-.507-.226-.71-.169-.918.023-.959.4-1.746.153-.479 1.083-1.977.667-.933.664-.702.483-.414.456-.186.438-.438.805-1.418.831-1.225 1.034-2.301.5-.609 1.751-1.016.476-.016.404.253.383.529 1.075 2.288.084-.07-.188-.863-.392-2.609.063-1.085.615-1.168.252-.209.649.078 1.047.362.7.396.531.642.631.397.327-.02.233-.306.334-1.002.435-1.713.174-2.136-.086-2.576-.126-1.908-.168-1.214.092-1.019.527-1.231.483-.905 1.152-1.288.935-.344.554.087.729.606 1.011.371.913 1.165 1.479 2.645.981 1.312.813.586.801.993 1.184 2.084.62.886.368.32.325.051-.121-.588-.566-1.235-.866-1.371-1.921-2.493-1.059-1.784-.949-2.058-.698-1.237-1.266-1.236.017-.495 1.528-1.754 2.808-1.542 3.165-1.216 1.059.125 1.861-.511.175-.775.4-.349 1.733-1.088.497.015.763.517.813.981.376.883.511 1.505.25 2.096-.038 6.444.014 1.19.098.457.353-.681.421-1.271.379-.905.291-1.407.204-1.92.121-1.438-.495-1.64-.024-2.73.248-1.474h.693l2.867 5.035 1.128 1.067 1.284 2.617 1.5-.276 1.384.319.612-.095.302-.404-.43-1.083-1.966-3.014-.893-2.405-.625-3.051-.152-1.645.478-.298 2.196.035 3.3 1.429 4.22 4.848 2.077 1.573 3.722 5.382 1.123.798.453.167.342-.651.211-.71.016-.951-.18-1.196-.104-1.394-.026-1.597.252-3.21.6-1.061.265-1.208-.247-2.203-.703-1.526-2.737-3.997-.011-.483.553-.533.82-.313 6.783.969 1.172.354.5.347.219.457.281.195 1.457-.544-.035-.998-.182-.638-7.872-1.755-1.467-.604-.747-.046-.772.464-1.601.229-.739-.088-.958-2.115.867-2.582.73.059 1.387 1.011.822-1.414 1.304-1.178 1.29-.417 2.814-2.567.52-.226.656.138L357.099 9l.575.637.659 1.355.382.417.454.077.622.608.9-1.977.813-2.149.934-1.373 1.321.802.836 1.039.764 1.23 1.081.676 1.832 4.115.342.004.162-.344.173-.756.062-1.129.225-1.546-.163-.575-1.535-1.737-.29-.673-.294-1.115-.005-.927.285-.735.3-.337.992.306.328-.24.31-.626.373-1.181.294-.302.664-.035 1.021.76.894.064.322-.349.049-.742.078-.474.106-.2 3.24-.041.804-.178.628-.567.769-.067.672.339.832.722.827-.034 1.232-1.18L383.129 0l6.403.156L391.637.873M349.788 34.267l-.569.358-1.188-2.166-1.881-2.195-1.659-1.48-1.559-3.951-.123-1.427.221-1.262 1.361-.193 1.089-.583 2.772 2.509 1.386 2.095.47 1.693L350.035 31 349.788 34.267M423.317 39.028l-.289.635-.74-.254-.948-1.789-.632-1.483-.045-1.759.325-.788.506-.132.695 1.508.713 2.011L423.317 39.028M426.271 74.774l-1.188 1.811-1.757-.139-1.04-.834-.297-1.259.396-1.41 1.262-1.138 1.584-.715 1.436.43.198 1.423L426.271 74.774M422.384 101.829l-.372.474-.247-1.427-.223-1.922-.05-2.19.569-1.106.297-.247.198.247-.05.984v1.949l.198 1.328L422.384 101.829M425.313 106.232h-.545l-.202-.341.129-.605.759-1.966.253-.161.371.214.113 1.012-.248 1.005L425.313 106.232M274.566 110.337l-1 .113-.985-.499-.338-.387.015-.593.149-.206.532-.206.442-.046.298.092.701.366.507.365.333.114-.095.523L274.566 110.337M423.548 125.976l-.322.307-1.089-4.883v-1.803l.074-1.392.495-.108.421.751.198 2.867L423.548 125.976M425.181 133.202l.223 1.174.099 1.069.347.676.743-.096.297 1.25-.544.479-2.153-.191-.891.095-.619-.766.025-1.35.074-1.361.619-.782.52.685.619-.489L425.181 133.202M321.295 160.048l-.397.642-.323.367-.702 1.089-.121.038-.189-.141-.147-.286-.265-.069-.092-.181-.037-.147-.118-.094-.187-.059-.3.112-.275-.112-.208-.479.384-.322.237-.275.917-.108.259.126.163-.003.248-.075.542-.343.081-.16.485.201L321.295 160.048M325.454 175.874l-.263.057-.754-.439-.123-.166-.047-.203.029-.241.24-.45.451-.661.327-.124.203.415.199.556.026.281-.013.331-.052.28-.091.23L325.454 175.874M404.324 176.902l.099.505.001.238-.021.199-.055.143-.132.126.246.333.08.224.015.178-.157.344-1.118.454-.311.218-.388.539-.472.462-.157-.002-.183-.479-.746-.353-1.403.184-1.643.444-.583.207-.295-.11-.09-.166-.004-.231.194-.678.079-.173.377-.226.255-.6-.083-.655.098-.917.258-.143.645.327.417.069.739.042.993-.11.798-.374 1.456-1.07.258.014.185.38.136.186.433.291L404.324 176.902M330.674 177.469l-.375.023-.872-.155-.07-.1-.011-.189.116-.546.384-.073.457.299.493.425.068.2L330.674 177.469M327.71 185.082l.935.664.991.457.097.208.077.315.018.164-.022.152-.063.14.072.18.208.22.021.257-.248.44-.349.488-1.846.999-.653.169-1.614.682-.494-.028-.109-.032-.305-.3-.418-.279-.196-.217-.173-.312.069-.193.311-.076.442.005.649-.227-.18-.205-.17-.125-.118-.272-.271.053-.203-.156-.391-.099-1.021-.094-.666-.268-.196-.161-.173-.278-.15-.392.218-1.53.15-.392.346-.129.846.342.114-.147-.926-.568-.34-.339-.1-.268-.06-.395v-.232l.042-.234.083-.235.225-.318.938-.508 1.022.174 1.774.624.22.132.544.533L327.71 185.082M332.53 188.26l-.44.283-.089-.063-.089-.216-.227-.984-.067-.468.056-.584-.088-.413.397-.482.321-.083.433.126.733.49-.053.159-.159.255-.441.333-.156.748-.03.374.021.28L332.53 188.26M371.772 217.846l-.437.004-.145-.532.043-.582.492-.183.265.401-.095.596L371.772 217.846M345.853 247.406l-.322.694-.322-.151-.159-.31-.317-.144-.342.043-.005-.123 1.111-.742.53-.2-.038.313-.101.274L345.853 247.406" />
</g>
</svg>
</div>
SVG Path rotation center
please help me.
I have a SVG image. I need to animate many objects from this SVG.
But provides animation objects move is unclear on what axis. I need to object rotate around its axis.
Video screen: http://dropix.net/view/1411265678541e348e45f2d/
CSS
#-webkit-keyframes svg_atom_1 {
0% {
}
100% {
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-ms-transform: rotate(359deg);
}
}
.element-atom-1 {
-webkit-animation: svg_atom_1 13s linear infinite;
animation: svg_atom_1 3s linear infinite;
z-index: 999;
position: absolute;
}
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="320" viewBox="0 0 960 320">
<path class="element-clock" fill="#ED1E79" d="M485 90h2v7h-2zM525.07 99.488l1.369.889-4.444 6.845-1.369-.889zM552.711 128.25l.853 1.392-6.958 4.263-.853-1.392zM554.365 205.887l-.819 1.41-7.056-4.1.819-1.41zM526.35 235.354l-1.396.845-4.224-6.982 1.396-.845zM486.872 245.342l-1.631.033-.166-8.159 1.631-.033zM448.369 236.372l-1.494-.658 3.29-7.468 1.494.658zM418.988 206.991l-.69-1.479 7.394-3.452.69 1.479zM408.441 168.492l.048-1.631 8.157.239-.048 1.631zM418.398 129.659l.852-1.39 6.957 4.265-.852 1.39zM446.366 101.147l1.375-.877 4.388 6.881-1.375.877zM564.358 167.014l-.017 1.633-8.16-.087.017-1.633z"/>
<path fill="#FF7BAC" d="M485.867 86.432"/>
<path opacity=".6" fill="#FBB03B" d="M486 86v87l39.443 64.233s42.257-20.391 41.319-69.906c.001 0-.093-73.445-80.762-81.327z"/><circle fill="#0cc" stroke="#0cc" stroke-width="1.558" stroke-miterlimit="10" cx="485.674" cy="167.864" r="50.004"/><g fill="#666766">
<path class="element-clock-2" d="M556.291 183.288l.363-1.702 5.116 1.092-.363 1.702zM554.28 190.604l.537-1.656 4.976 1.614-.537 1.656zM551.463 197.599l.707-1.59 4.78 2.126-.707 1.59zM543.784 210.531l1.025-1.407 4.228 3.081-1.025 1.407zM538.99 216.323l1.168-1.295 3.883 3.502-1.168 1.295zM533.599 221.605l1.293-1.163 3.498 3.889-1.293 1.163zM527.665 226.295l1.41-1.023 3.069 4.233-1.41 1.023zM514.518 233.676l1.59-.711 2.134 4.772-1.59.711zM507.458 236.304l1.655-.538 1.617 4.973-1.655.538zM500.109 238.136l1.705-.363 1.09 5.115-1.705.363zM492.673 239.234l1.732-.181.543 5.203-1.732.181zM477.605 239.054l1.732.181-.543 5.203-1.732-.181zM470.18 237.775l1.703.363-1.091 5.116-1.703-.363zM462.933 235.745l1.655.538-1.618 4.974-1.655-.538zM455.912 232.976l1.594.711-2.131 4.777-1.594-.711zM442.944 225.278l1.409 1.022-3.072 4.233-1.409-1.022zM437.163 220.444l1.295 1.163-3.495 3.891-1.295-1.163zM557.583 175.896l.182-1.729 5.203.547-.182 1.729zM427.216 209.122l1.023 1.407-4.229 3.076-1.023-1.407zM419.822 195.986l.708 1.589-4.777 2.127-.708-1.589zM417.188 188.931l.535 1.657-4.979 1.608-.535-1.657zM415.338 181.617l.362 1.702-5.114 1.088-.362-1.702zM414.241 174.129l.182 1.729-5.201.546-.182-1.729zM414.421 159.06l-.182 1.73-5.201-.546.182-1.73zM415.687 151.623l-.362 1.704-5.114-1.088.362-1.704zM417.729 144.367l-.535 1.657-4.974-1.606.535-1.657zM419.818 138.965l.708-1.588-4.776-2.132-.709 1.595zM428.218 124.402l-1.024 1.408-4.232-3.076 1.024-1.408zM433.027 118.605l-1.164 1.292-3.887-3.502 1.164-1.292zM438.441 113.332l-1.295 1.165-3.498-3.888 1.295-1.165zM444.331 108.667l-1.409 1.021-3.069-4.235 1.409-1.021zM457.476 101.299l-1.594.708-2.124-4.781 1.594-.708zM464.563 98.657l-1.654.539-1.621-4.974 1.654-.539zM471.877 96.828l-1.703.362-1.089-5.116 1.703-.362zM479.347 95.748l-1.731.184-.552-5.2 1.731-.184zM557.768 160.835l-.182-1.73 5.201-.546.182 1.73zM556.672 153.363l-.363-1.704 5.114-1.09.363 1.704zM554.813 146.033l-.537-1.657 4.976-1.613.537 1.657zM551.48 137.377l.708 1.588 4.779-2.125-.707-1.595zM544.839 125.832l-1.025-1.408 4.228-3.078 1.025 1.408zM540.148 119.917l-1.168-1.292 3.878-3.506 1.168 1.292zM534.882 114.501l-1.293-1.165 3.501-3.885 1.293 1.165zM529.04 109.707l-1.41-1.021 3.067-4.234 1.41 1.021zM516.11 102.015l-1.589-.708 2.128-4.778 1.589.708zM509.086 99.235l-1.654-.539 1.621-4.976 1.654.539zM501.82 97.148l-1.705-.362 1.088-5.118 1.705.362zM431.844 215.055l1.164 1.295-3.89 3.497-1.164-1.295zM494.407 95.93l-1.731-.184.551-5.203 1.731.184z"/></g><g stroke-width="2" fill="none"><ellipse stroke="#66899A" cx="481.409" cy="170.426" rx="20.336" ry="149.132"/><ellipse transform="matrix(-.913 -.407 .407 -.913 851.879 521.925)" stroke="#E1D85D" cx="481.409" cy="170.426" rx="149.132" ry="20.336"/><ellipse transform="matrix(.913 -.407 .407 .913 -27.699 210.541)" stroke="#80A3CF" cx="481.409" cy="170.426" rx="149.132" ry="20.336"/></g><circle fill="#66899A" stroke="#fff" stroke-width="2" cx="497.508" cy="78.931" r="14.405"/>
<path class="element-atom-1" fill="#E5D015" stroke="#fff" stroke-miterlimit="10" d="M555.479 200.33h5.568v-4.019c4.071-.985 6.582-3.812 6.582-7.565 0-3.842-2.041-6.195-6.825-7.868-1.756-.639-3.786-1.476-3.786-2.225 0-.985 1.384-1.137 2.207-1.137 2.407 0 3.947.741 4.869 1.183l1.059.507.336-1.116 1.32-4.962-.733-.346c-.976-.459-2.537-1.033-4.842-1.23v-3.335h-5.568v3.731c-3.866 1.005-6.249 3.741-6.249 7.334 0 4.632 3.909 6.54 7.316 7.688 2.894.976 3.295 1.681 3.295 2.294 0 .912-1.314 1.32-2.615 1.32-2.536 0-4.644-.945-5.671-1.509l-1.098-.6-1.604 6.267v.001l.658.363c1.485.822 3.674 1.401 5.782 1.591v3.633z" /><g fill="#80A3CF" stroke="#fff" stroke-width="2">
<path d="M387.995 214.209c-8.832 0-15.991 5.506-15.991 12.301 0 3.331 1.725 6.36 4.524 8.574-.162 2.258-.706 5.021-2.281 6.51 3.134 0 6.337-1.963 8.362-3.498 1.683.463 3.493.716 5.385.716 8.832 0 15.991-5.503 15.991-12.301.001-6.796-7.158-12.302-15.99-12.302zM408.251 227.708c1.346-1.798 2.116-3.89 2.116-6.119 0-6.795-7.159-12.301-15.991-12.301-3.887 0-7.45 1.068-10.22 2.839 1.304-.246 2.667-.379 4.069-.379 9.511 0 17.221 6.059 17.221 13.531 0 2.945-1.193 5.673-3.228 7.89 2.02 1.535 5.228 3.503 8.362 3.503-2.228-2.115-2.388-6.804-2.329-8.964z"/></g>
<path fill="#DF5C4D" d="M536.5 137.833v61l-52 28.5-51-28.5v-61l51-28.5z"/>
<path fill="#BC4A3D" d="M530.5 141.387v53.893l-45.942 25.179-45.058-25.179v-53.893l45.058-25.18z"/><text transform="translate(456.5 186.333)" fill="#fff" font-family="'PTMono-Bold'" font-size="48">VS</text>
...
...
...
</svg>