Extraction séquentielle de chaines de caractères d'un div

**JPBruneau** · 31/12/2019, 11h54

C'est le réveillon alors vous avez été Cool

, voila ou j'en suis, code complet et marche toujours pas,
Ce que c'est, un visage de l'un de mes enfants passé d'un div hidden ligne par ligne le visage parait comme dessiné.
bien sur ça marche pour tout le html ... si je mets tel-quel les premières lignes en copié collé dans le svg et supprime le javascript vous verrez ses cheveux !
alors mon erreur est ou ???

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<HTML xmlns:v = "urn:schemas-microsoft-com:vml" xmlns:o = "urn:schemas-microsoft-com:office:office">
<BODY bgColor=#ffffff scroll=no> 
 
<style>
svg.lui {  margin: auto;  display: block;  width: 80%;  height:800px;  max-width:900px; }
</style>
 
<?xml version="1.0" standalone="yes"?>
<svg  id='lui' name='lui' class='lui' > 
 
</svg>
<div id="limage" style="visibility:hidden;">
<path d="M 0.00 0.00 L 500.00 0.00 L 500.00 521.00 L 431.95 521.00 C 429.66 515.41 426.51 510.13 424.46 504.43 C 423.85 503.47 422.81 502.77 421.99 501.99 C 422.16 498.38 420.10 497.42 417.91 495.14 C 415.57 489.52 409.26 486.27 405.40 481.61 C 404.00 479.65 402.35 479.18 400.07 478.76 C 396.35 474.36 391.36 472.56 387.26 468.76 C 385.23 467.31 383.24 465.90 381.06 464.76 C 378.72 463.27 376.35 462.11 373.70 461.27 C 372.84 460.79 372.00 460.30 371.17 459.80 C 369.76 457.94 368.10 456.26 366.47 454.58 C 363.42 453.08 357.50 454.83 357.65 449.89 L 357.88 449.04 C 359.04 448.80 359.80 448.17 360.15 447.13 C 363.01 444.85 365.70 442.71 367.54 439.46 C 369.85 435.79 373.54 434.16 375.23 430.02 C 379.38 429.36 380.97 431.93 384.16 433.83 C 386.80 434.24 389.68 434.25 392.19 433.22 C 396.47 431.56 400.33 432.47 403.03 428.05 C 406.66 428.13 406.96 425.25 409.65 423.54 C 412.43 422.31 416.93 424.98 417.54 421.48 C 418.97 420.50 423.25 421.87 420.88 419.28 L 422.04 418.38 C 425.50 417.94 426.23 415.62 427.98 413.11 C 432.26 411.94 434.34 409.08 437.12 406.00 C 440.21 406.24 438.71 399.92 439.00 397.99 C 439.31 393.99 435.91 395.94 435.56 391.90 C 437.19 389.57 440.06 388.07 441.73 385.76 C 443.00 382.70 444.47 379.74 445.76 376.70 C 448.14 375.48 450.65 374.90 453.23 374.28 L 454.16 374.06 L 455.80 373.66 C 455.39 370.58 454.46 367.64 453.16 364.82 L 453.04 363.90 C 452.23 359.21 452.84 354.64 452.05 349.99 C 451.58 347.54 453.18 346.39 454.18 344.43 C 453.10 342.64 452.91 340.83 452.71 338.78 L 453.13 337.22 C 456.31 336.60 455.21 332.20 453.12 330.78 C 453.08 329.26 453.08 327.74 453.12 326.22 C 456.37 323.94 454.39 318.56 455.19 315.03 C 456.07 311.35 455.02 308.00 454.93 304.32 C 455.71 302.62 456.32 300.86 457.04 299.13 L 458.60 298.54 C 459.13 295.70 459.43 292.86 460.23 290.07 C 461.26 287.38 460.63 284.35 461.85 281.80 C 463.30 278.79 463.71 275.20 464.04 271.90 C 464.46 271.01 464.86 270.11 465.23 269.20 C 466.30 267.09 465.97 264.33 466.03 262.00 C 465.89 255.34 466.15 248.67 465.94 242.02 C 466.07 240.83 465.48 240.07 464.15 239.74 C 463.95 236.58 463.42 235.01 461.13 232.80 C 459.94 228.22 466.69 225.70 467.43 221.02 C 470.07 215.71 471.12 210.99 472.27 205.22 C 473.35 202.15 473.29 198.86 472.35 195.77 C 472.01 194.33 471.61 192.91 471.13 191.51 C 470.87 189.69 471.51 187.25 469.89 186.09 C 467.09 183.66 467.09 180.40 466.96 176.98 C 467.09 173.79 464.98 172.00 463.95 169.09 C 463.13 167.38 463.04 165.67 461.23 164.70 C 460.64 161.70 460.57 158.67 457.91 156.71 C 456.49 153.51 457.40 149.94 456.03 146.64 C 457.65 140.63 453.57 138.82 451.11 134.17 C 448.76 136.27 448.87 134.46 446.76 133.18 C 445.89 132.16 445.29 131.22 444.92 129.92 C 444.25 126.37 441.59 124.45 441.56 120.38 C 437.65 116.09 432.43 113.70 428.97 109.02 C 427.87 107.58 426.86 107.20 425.15 106.73 C 420.52 102.72 415.74 98.97 411.63 94.37 C 410.48 92.82 408.88 93.22 407.17 92.83 L 406.05 92.05 C 405.30 88.10 402.01 87.69 398.96 86.03 C 396.67 83.15 393.71 81.98 392.55 78.39 C 391.75 75.76 389.54 75.08 387.32 73.95 C 386.31 73.23 385.31 72.49 384.29 71.79 C 382.88 69.86 381.31 68.07 379.50 66.51 C 376.78 65.03 373.20 65.01 370.55 63.41 C 367.67 61.23 364.86 59.08 361.72 57.27 C 359.84 55.14 357.71 53.31 355.55 51.46 C 353.39 50.22 350.56 50.16 348.18 49.71 C 345.54 48.07 343.16 46.03 340.43 44.51 C 338.06 43.35 338.12 40.51 336.27 38.74 C 332.92 35.78 328.29 34.76 325.85 31.10 C 323.79 28.87 321.17 28.14 318.27 27.65 C 315.54 27.00 312.73 26.21 309.91 26.10 C 308.62 26.33 307.39 26.80 306.12 27.20 C 300.74 26.69 295.32 25.19 290.01 24.11 C 290.14 19.92 288.48 21.66 285.58 20.48 C 284.08 16.90 281.17 16.92 277.86 16.07 C 274.28 15.27 271.63 14.68 268.64 12.44 C 263.44 11.73 256.98 9.15 251.90 10.67 L 251.09 10.92 C 247.60 11.84 244.06 11.83 240.53 12.36 L 240.18 13.05 L 239.77 13.88 C 237.55 13.97 235.34 13.98 233.12 14.06 C 229.67 14.03 226.53 14.40 224.82 17.78 C 223.85 18.08 222.89 18.41 221.93 18.75 C 215.28 18.81 212.89 24.00 207.07 25.80 L 206.45 26.04 C 205.95 25.04 205.39 24.08 204.76 23.17 C 203.53 23.31 202.28 23.66 201.09 23.96 C 197.37 24.53 195.06 26.87 191.95 28.66 C 186.49 28.70 182.54 35.27 178.90 38.71 C 177.14 39.90 175.94 41.10 174.77 42.88 C 172.08 44.61 170.12 47.00 168.83 49.92 L 167.94 50.94 C 163.55 51.91 162.58 52.75 160.85 56.86 C 158.47 57.78 157.80 58.41 156.75 60.74 C 149.98 62.76 144.16 69.31 139.67 74.56 C 137.44 75.71 136.55 77.26 135.37 79.36 C 131.82 80.69 130.27 82.16 128.21 85.30 C 125.46 87.95 126.26 91.65 123.07 93.95 C 120.20 94.14 120.20 94.59 118.95 96.94 C 116.69 100.88 113.78 102.81 113.82 107.86 C 111.88 109.55 111.20 111.54 110.70 114.00 C 109.51 115.54 108.62 117.08 108.17 119.00 C 107.00 121.87 106.93 124.78 106.84 127.84 C 106.48 128.49 106.13 129.15 105.79 129.81 C 104.58 131.68 104.11 132.97 104.14 135.25 C 103.78 136.80 103.32 138.31 102.82 139.82 C 101.29 142.24 100.45 144.91 99.74 147.67 C 97.10 149.56 97.78 153.79 95.09 156.14 C 95.69 156.55 96.30 156.93 96.92 157.30 C 96.88 159.02 97.11 160.58 96.07 162.09 C 94.70 164.05 93.96 165.73 94.07 168.19 C 92.87 177.96 96.55 186.66 94.31 196.15 C 94.12 197.06 93.93 197.97 93.76 198.89 C 93.19 200.93 92.60 202.90 91.60 204.78 C 92.37 205.24 93.15 205.68 93.94 206.10 C 93.98 207.74 94.02 209.38 94.06 211.03 C 93.98 214.75 94.02 218.47 94.00 222.19 L 93.67 223.01 C 92.01 227.10 90.50 231.36 89.72 235.71 C 86.83 236.54 87.97 242.08 88.75 244.16 C 89.54 246.19 90.00 248.07 90.16 250.26 C 90.18 254.85 92.85 257.80 93.85 262.17 C 93.97 264.38 93.96 266.59 93.76 268.79 C 92.66 271.90 93.58 275.02 91.67 277.57 C 90.82 279.06 91.02 281.17 90.73 282.84 C 90.46 283.84 90.24 284.84 90.07 285.84 L 89.71 287.77 C 89.35 288.77 89.02 289.78 88.72 290.80 C 87.93 293.47 87.60 296.28 87.20 299.03 C 86.97 300.98 86.84 302.94 86.59 304.90 C 86.14 306.97 86.03 309.26 84.99 311.08 C 82.69 314.65 84.07 317.69 83.95 321.63 C 83.54 322.69 83.15 323.75 82.79 324.83 C 81.07 326.89 79.85 328.06 79.86 330.96 C 79.81 335.39 76.39 338.05 76.20 342.28 C 76.04 343.48 75.89 344.68 75.73 345.88 C 75.36 347.15 75.08 348.44 74.83 349.74 C 73.61 350.09 73.04 350.85 73.11 352.03 C 72.93 355.70 71.51 359.21 72.41 362.64 C 73.99 369.00 71.90 376.02 73.72 382.22 C 74.02 383.23 74.35 384.22 74.70 385.22 C 75.03 386.82 75.38 388.41 75.83 389.98 C 76.14 392.00 76.68 393.45 77.87 395.11 C 78.24 395.70 78.61 396.29 78.99 396.88 C 79.53 399.17 80.17 400.53 81.83 402.21 C 82.80 404.97 83.00 406.82 85.94 408.11 L 86.16 408.92 C 86.14 410.23 86.14 411.55 86.13 412.86 L 85.95 414.91 C 81.76 416.47 76.85 415.19 72.98 416.88 L 71.73 417.56 C 70.30 418.17 69.41 418.30 68.78 419.87 C 67.74 420.44 66.65 420.97 65.66 421.62 C 62.98 426.03 59.06 428.76 55.78 432.71 C 52.78 435.65 50.84 440.66 49.76 444.70 C 48.73 446.40 47.63 448.06 46.61 449.77 C 44.95 451.93 44.71 454.34 43.94 456.87 L 42.78 457.78 C 40.77 458.68 40.67 460.93 39.85 462.76 C 36.69 465.96 35.95 470.58 33.72 474.67 C 32.71 478.26 29.94 480.64 29.35 484.33 C 28.51 487.81 29.87 491.72 27.71 494.58 C 26.91 496.07 27.04 498.02 26.56 499.64 C 21.90 505.49 17.86 513.38 17.75 521.00 L 0.00 521.00 L 0.00 0.00 Z" fill="#ffffff" />
<path d="M 268.64 12.44 C 271.63 14.68 274.28 15.27 277.86 16.07 C 281.79 19.38 284.81 22.82 290.01 24.11 C 295.32 25.19 300.74 26.69 306.12 27.20 C 304.87 27.62 303.60 27.98 302.35 28.41 C 302.09 29.66 301.91 30.92 301.79 32.20 C 298.37 28.39 294.61 29.16 290.18 27.65 C 287.59 26.02 284.84 26.18 282.02 25.38 C 282.77 24.97 283.49 24.51 284.18 24.00 C 282.26 21.17 278.92 19.16 276.16 17.17 C 276.09 18.30 276.05 19.42 276.02 20.55 L 275.39 21.25 C 274.28 17.66 273.31 18.28 270.02 17.87 C 267.26 17.95 267.13 14.79 264.21 15.08 C 260.70 14.79 257.57 13.60 254.26 14.18 C 254.13 15.06 254.03 15.95 253.95 16.84 C 252.56 16.71 253.13 14.18 253.13 13.24 C 255.43 12.97 257.74 12.95 260.03 12.70 C 257.46 11.36 254.77 10.88 251.90 10.67 C 256.98 9.15 263.44 11.73 268.64 12.44 Z" fill="#9aa773" />
<path d="M 251.09 10.92 L 250.60 12.72 C 247.20 13.28 243.62 12.91 240.18 13.05 L 240.53 12.36 C 244.06 11.83 247.60 11.84 251.09 10.92 Z" fill="#a5b08b" />
<path d="M 251.09 10.92 L 251.90 10.67 C 254.77 10.88 257.46 11.36 260.03 12.70 C 257.74 12.95 255.43 12.97 253.13 13.24 C 253.13 14.18 252.56 16.71 253.95 16.84 C 256.45 17.91 258.97 18.82 261.66 19.33 C 262.46 20.23 263.30 21.09 264.14 21.95 C 263.24 27.78 259.02 18.42 257.81 23.85 C 255.29 21.46 253.81 18.38 250.21 17.72 C 250.08 16.55 249.91 15.39 249.72 14.23 C 246.44 13.82 243.07 14.02 239.77 13.88 L 240.18 13.05 C 243.62 12.91 247.20 13.28 250.60 12.72 L 251.09 10.92 Z" fill="#788961" />
<path d="M 233.12 14.06 C 231.80 15.20 230.53 16.37 229.07 17.35 L 227.68 17.96 C 226.73 17.90 225.78 17.84 224.82 17.78 C 226.53 14.40 229.67 14.03 233.12 14.06 Z" fill="#989c6b" />
</div>
 
<script type="text/javascript">
var match="";
console.log(document.getElementById('limage').textContent.match(/<.+>/gm));
lui.insertAdjacentHTML("beforeEnd",match[0]); 
 
</script>
</body></html>

merci d'avance...

**javatwister** · 31/12/2019, 12h02

Que vient faire cette ligne 22 dans ta logique???

**JPBruneau** · 31/12/2019, 12h30

Oui tu as raison j'ai cru que l'on pouvait concaténer tes deux lignes du début ..
Alors disons ceci:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<HTML xmlns:v = "urn:schemas-microsoft-com:vml" xmlns:o = "urn:schemas-microsoft-com:office:office">
<BODY bgColor=#ffffff scroll=no> 
 
<style>
svg.lui {  margin: auto;  display: block;  width: 80%;  height:800px;  max-width:900px; }
</style>
 
<?xml version="1.0" standalone="yes"?>
<svg  id='lui' name='lui' class='lui' > 
 
</svg>
<div id="limage" style="visibility:hidden;">
<path d="M 0.00 0.00 L 500.00 0.00 L 500.00 521.00 L 431.95 521.00 C 429.66 515.41 426.51 510.13 424.46 504.43 C 423.85 503.47 422.81 502.77 421.99 501.99 C 422.16 498.38 420.10 497.42 417.91 495.14 C 415.57 489.52 409.26 486.27 405.40 481.61 C 404.00 479.65 402.35 479.18 400.07 478.76 C 396.35 474.36 391.36 472.56 387.26 468.76 C 385.23 467.31 383.24 465.90 381.06 464.76 C 378.72 463.27 376.35 462.11 373.70 461.27 C 372.84 460.79 372.00 460.30 371.17 459.80 C 369.76 457.94 368.10 456.26 366.47 454.58 C 363.42 453.08 357.50 454.83 357.65 449.89 L 357.88 449.04 C 359.04 448.80 359.80 448.17 360.15 447.13 C 363.01 444.85 365.70 442.71 367.54 439.46 C 369.85 435.79 373.54 434.16 375.23 430.02 C 379.38 429.36 380.97 431.93 384.16 433.83 C 386.80 434.24 389.68 434.25 392.19 433.22 C 396.47 431.56 400.33 432.47 403.03 428.05 C 406.66 428.13 406.96 425.25 409.65 423.54 C 412.43 422.31 416.93 424.98 417.54 421.48 C 418.97 420.50 423.25 421.87 420.88 419.28 L 422.04 418.38 C 425.50 417.94 426.23 415.62 427.98 413.11 C 432.26 411.94 434.34 409.08 437.12 406.00 C 440.21 406.24 438.71 399.92 439.00 397.99 C 439.31 393.99 435.91 395.94 435.56 391.90 C 437.19 389.57 440.06 388.07 441.73 385.76 C 443.00 382.70 444.47 379.74 445.76 376.70 C 448.14 375.48 450.65 374.90 453.23 374.28 L 454.16 374.06 L 455.80 373.66 C 455.39 370.58 454.46 367.64 453.16 364.82 L 453.04 363.90 C 452.23 359.21 452.84 354.64 452.05 349.99 C 451.58 347.54 453.18 346.39 454.18 344.43 C 453.10 342.64 452.91 340.83 452.71 338.78 L 453.13 337.22 C 456.31 336.60 455.21 332.20 453.12 330.78 C 453.08 329.26 453.08 327.74 453.12 326.22 C 456.37 323.94 454.39 318.56 455.19 315.03 C 456.07 311.35 455.02 308.00 454.93 304.32 C 455.71 302.62 456.32 300.86 457.04 299.13 L 458.60 298.54 C 459.13 295.70 459.43 292.86 460.23 290.07 C 461.26 287.38 460.63 284.35 461.85 281.80 C 463.30 278.79 463.71 275.20 464.04 271.90 C 464.46 271.01 464.86 270.11 465.23 269.20 C 466.30 267.09 465.97 264.33 466.03 262.00 C 465.89 255.34 466.15 248.67 465.94 242.02 C 466.07 240.83 465.48 240.07 464.15 239.74 C 463.95 236.58 463.42 235.01 461.13 232.80 C 459.94 228.22 466.69 225.70 467.43 221.02 C 470.07 215.71 471.12 210.99 472.27 205.22 C 473.35 202.15 473.29 198.86 472.35 195.77 C 472.01 194.33 471.61 192.91 471.13 191.51 C 470.87 189.69 471.51 187.25 469.89 186.09 C 467.09 183.66 467.09 180.40 466.96 176.98 C 467.09 173.79 464.98 172.00 463.95 169.09 C 463.13 167.38 463.04 165.67 461.23 164.70 C 460.64 161.70 460.57 158.67 457.91 156.71 C 456.49 153.51 457.40 149.94 456.03 146.64 C 457.65 140.63 453.57 138.82 451.11 134.17 C 448.76 136.27 448.87 134.46 446.76 133.18 C 445.89 132.16 445.29 131.22 444.92 129.92 C 444.25 126.37 441.59 124.45 441.56 120.38 C 437.65 116.09 432.43 113.70 428.97 109.02 C 427.87 107.58 426.86 107.20 425.15 106.73 C 420.52 102.72 415.74 98.97 411.63 94.37 C 410.48 92.82 408.88 93.22 407.17 92.83 L 406.05 92.05 C 405.30 88.10 402.01 87.69 398.96 86.03 C 396.67 83.15 393.71 81.98 392.55 78.39 C 391.75 75.76 389.54 75.08 387.32 73.95 C 386.31 73.23 385.31 72.49 384.29 71.79 C 382.88 69.86 381.31 68.07 379.50 66.51 C 376.78 65.03 373.20 65.01 370.55 63.41 C 367.67 61.23 364.86 59.08 361.72 57.27 C 359.84 55.14 357.71 53.31 355.55 51.46 C 353.39 50.22 350.56 50.16 348.18 49.71 C 345.54 48.07 343.16 46.03 340.43 44.51 C 338.06 43.35 338.12 40.51 336.27 38.74 C 332.92 35.78 328.29 34.76 325.85 31.10 C 323.79 28.87 321.17 28.14 318.27 27.65 C 315.54 27.00 312.73 26.21 309.91 26.10 C 308.62 26.33 307.39 26.80 306.12 27.20 C 300.74 26.69 295.32 25.19 290.01 24.11 C 290.14 19.92 288.48 21.66 285.58 20.48 C 284.08 16.90 281.17 16.92 277.86 16.07 C 274.28 15.27 271.63 14.68 268.64 12.44 C 263.44 11.73 256.98 9.15 251.90 10.67 L 251.09 10.92 C 247.60 11.84 244.06 11.83 240.53 12.36 L 240.18 13.05 L 239.77 13.88 C 237.55 13.97 235.34 13.98 233.12 14.06 C 229.67 14.03 226.53 14.40 224.82 17.78 C 223.85 18.08 222.89 18.41 221.93 18.75 C 215.28 18.81 212.89 24.00 207.07 25.80 L 206.45 26.04 C 205.95 25.04 205.39 24.08 204.76 23.17 C 203.53 23.31 202.28 23.66 201.09 23.96 C 197.37 24.53 195.06 26.87 191.95 28.66 C 186.49 28.70 182.54 35.27 178.90 38.71 C 177.14 39.90 175.94 41.10 174.77 42.88 C 172.08 44.61 170.12 47.00 168.83 49.92 L 167.94 50.94 C 163.55 51.91 162.58 52.75 160.85 56.86 C 158.47 57.78 157.80 58.41 156.75 60.74 C 149.98 62.76 144.16 69.31 139.67 74.56 C 137.44 75.71 136.55 77.26 135.37 79.36 C 131.82 80.69 130.27 82.16 128.21 85.30 C 125.46 87.95 126.26 91.65 123.07 93.95 C 120.20 94.14 120.20 94.59 118.95 96.94 C 116.69 100.88 113.78 102.81 113.82 107.86 C 111.88 109.55 111.20 111.54 110.70 114.00 C 109.51 115.54 108.62 117.08 108.17 119.00 C 107.00 121.87 106.93 124.78 106.84 127.84 C 106.48 128.49 106.13 129.15 105.79 129.81 C 104.58 131.68 104.11 132.97 104.14 135.25 C 103.78 136.80 103.32 138.31 102.82 139.82 C 101.29 142.24 100.45 144.91 99.74 147.67 C 97.10 149.56 97.78 153.79 95.09 156.14 C 95.69 156.55 96.30 156.93 96.92 157.30 C 96.88 159.02 97.11 160.58 96.07 162.09 C 94.70 164.05 93.96 165.73 94.07 168.19 C 92.87 177.96 96.55 186.66 94.31 196.15 C 94.12 197.06 93.93 197.97 93.76 198.89 C 93.19 200.93 92.60 202.90 91.60 204.78 C 92.37 205.24 93.15 205.68 93.94 206.10 C 93.98 207.74 94.02 209.38 94.06 211.03 C 93.98 214.75 94.02 218.47 94.00 222.19 L 93.67 223.01 C 92.01 227.10 90.50 231.36 89.72 235.71 C 86.83 236.54 87.97 242.08 88.75 244.16 C 89.54 246.19 90.00 248.07 90.16 250.26 C 90.18 254.85 92.85 257.80 93.85 262.17 C 93.97 264.38 93.96 266.59 93.76 268.79 C 92.66 271.90 93.58 275.02 91.67 277.57 C 90.82 279.06 91.02 281.17 90.73 282.84 C 90.46 283.84 90.24 284.84 90.07 285.84 L 89.71 287.77 C 89.35 288.77 89.02 289.78 88.72 290.80 C 87.93 293.47 87.60 296.28 87.20 299.03 C 86.97 300.98 86.84 302.94 86.59 304.90 C 86.14 306.97 86.03 309.26 84.99 311.08 C 82.69 314.65 84.07 317.69 83.95 321.63 C 83.54 322.69 83.15 323.75 82.79 324.83 C 81.07 326.89 79.85 328.06 79.86 330.96 C 79.81 335.39 76.39 338.05 76.20 342.28 C 76.04 343.48 75.89 344.68 75.73 345.88 C 75.36 347.15 75.08 348.44 74.83 349.74 C 73.61 350.09 73.04 350.85 73.11 352.03 C 72.93 355.70 71.51 359.21 72.41 362.64 C 73.99 369.00 71.90 376.02 73.72 382.22 C 74.02 383.23 74.35 384.22 74.70 385.22 C 75.03 386.82 75.38 388.41 75.83 389.98 C 76.14 392.00 76.68 393.45 77.87 395.11 C 78.24 395.70 78.61 396.29 78.99 396.88 C 79.53 399.17 80.17 400.53 81.83 402.21 C 82.80 404.97 83.00 406.82 85.94 408.11 L 86.16 408.92 C 86.14 410.23 86.14 411.55 86.13 412.86 L 85.95 414.91 C 81.76 416.47 76.85 415.19 72.98 416.88 L 71.73 417.56 C 70.30 418.17 69.41 418.30 68.78 419.87 C 67.74 420.44 66.65 420.97 65.66 421.62 C 62.98 426.03 59.06 428.76 55.78 432.71 C 52.78 435.65 50.84 440.66 49.76 444.70 C 48.73 446.40 47.63 448.06 46.61 449.77 C 44.95 451.93 44.71 454.34 43.94 456.87 L 42.78 457.78 C 40.77 458.68 40.67 460.93 39.85 462.76 C 36.69 465.96 35.95 470.58 33.72 474.67 C 32.71 478.26 29.94 480.64 29.35 484.33 C 28.51 487.81 29.87 491.72 27.71 494.58 C 26.91 496.07 27.04 498.02 26.56 499.64 C 21.90 505.49 17.86 513.38 17.75 521.00 L 0.00 521.00 L 0.00 0.00 Z" fill="#ffffff" />
<path d="M 268.64 12.44 C 271.63 14.68 274.28 15.27 277.86 16.07 C 281.79 19.38 284.81 22.82 290.01 24.11 C 295.32 25.19 300.74 26.69 306.12 27.20 C 304.87 27.62 303.60 27.98 302.35 28.41 C 302.09 29.66 301.91 30.92 301.79 32.20 C 298.37 28.39 294.61 29.16 290.18 27.65 C 287.59 26.02 284.84 26.18 282.02 25.38 C 282.77 24.97 283.49 24.51 284.18 24.00 C 282.26 21.17 278.92 19.16 276.16 17.17 C 276.09 18.30 276.05 19.42 276.02 20.55 L 275.39 21.25 C 274.28 17.66 273.31 18.28 270.02 17.87 C 267.26 17.95 267.13 14.79 264.21 15.08 C 260.70 14.79 257.57 13.60 254.26 14.18 C 254.13 15.06 254.03 15.95 253.95 16.84 C 252.56 16.71 253.13 14.18 253.13 13.24 C 255.43 12.97 257.74 12.95 260.03 12.70 C 257.46 11.36 254.77 10.88 251.90 10.67 C 256.98 9.15 263.44 11.73 268.64 12.44 Z" fill="#9aa773" />
<path d="M 251.09 10.92 L 250.60 12.72 C 247.20 13.28 243.62 12.91 240.18 13.05 L 240.53 12.36 C 244.06 11.83 247.60 11.84 251.09 10.92 Z" fill="#a5b08b" />
<path d="M 251.09 10.92 L 251.90 10.67 C 254.77 10.88 257.46 11.36 260.03 12.70 C 257.74 12.95 255.43 12.97 253.13 13.24 C 253.13 14.18 252.56 16.71 253.95 16.84 C 256.45 17.91 258.97 18.82 261.66 19.33 C 262.46 20.23 263.30 21.09 264.14 21.95 C 263.24 27.78 259.02 18.42 257.81 23.85 C 255.29 21.46 253.81 18.38 250.21 17.72 C 250.08 16.55 249.91 15.39 249.72 14.23 C 246.44 13.82 243.07 14.02 239.77 13.88 L 240.18 13.05 C 243.62 12.91 247.20 13.28 250.60 12.72 L 251.09 10.92 Z" fill="#788961" />
<path d="M 233.12 14.06 C 231.80 15.20 230.53 16.37 229.07 17.35 L 227.68 17.96 C 226.73 17.90 225.78 17.84 224.82 17.78 C 226.53 14.40 229.67 14.03 233.12 14.06 Z" fill="#989c6b" />
</div>
 
<script type="text/javascript">
"use strict";
var string = document.getElementById('limage').textContent;
var pattern = /\<([^\>]*)\>/gm;
var match;
while (match = pattern.exec(string)){ 
  lui.insertAdjacentHTML("beforeEnd",match[0]); 
}
 
 
</script>
</body></html>

Merci

Invité · 31/12/2019, 15h08

Jean-Pierre,
si tu avais montré ton "vrai" code depuis le début, on t'aurait donné une réponse plus appropriée.
Au lieu de ça... tu nous a fait perdre notre temps.

@javatwister
J'ai cru pouvoir utiliser .children (ou .childNodes) pour récupérer tous les <path ... /> en tant qu'éléments du DOM :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var paths = document.getElementById('limage').children;

Mais je n'ai pas réussi (je ne récupère que le 1er)

J'ai cru que c'était à cause du fait que ce sont des balises auto-fermantes : on y arrive en modifiant en : <path ....></path>.
Mais si on remplace <path ... /> par <img ... />, ça fonctionne aussi !

[EDIT] J'ai trouvé !

Il faut remplacer <div id="limage">....</div> par <svg id="limage">....</svg> !
Et là, les <path ... /> sont bien TOUS trouvés !

**javatwister** · 31/12/2019, 15h54

Ben moi je ne comprends plus très bien le but; bref, ceci affiche le contenu du div dans le svg:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

string.querySelectorAll("path").forEach(v=>{document.getElementById("lui").appendChild(document.createTextNode(v.getAttribute("d")))})

mais l'intérêt de la manip m'échappe toujours;

Invité · 31/12/2019, 15h57

Voici donc ma solution :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<svg id="lui" name="lui" class="lui"></svg>
<svg id="limage" style="display:none;">
	<path d="M 0.00 0.00 L 500.00 0.00 L 500.00 521.00 L 431.95 521.00 C 429.66 515.41 426.51 510.13 424.46 504.43 C 423.85 503.47 422.81 502.77 421.99 501.99 C 422.16 498.38 420.10 497.42 417.91 495.14 C 415.57 489.52 409.26 486.27 405.40 481.61 C 404.00 479.65 402.35 479.18 400.07 478.76 C 396.35 474.36 391.36 472.56 387.26 468.76 C 385.23 467.31 383.24 465.90 381.06 464.76 C 378.72 463.27 376.35 462.11 373.70 461.27 C 372.84 460.79 372.00 460.30 371.17 459.80 C 369.76 457.94 368.10 456.26 366.47 454.58 C 363.42 453.08 357.50 454.83 357.65 449.89 L 357.88 449.04 C 359.04 448.80 359.80 448.17 360.15 447.13 C 363.01 444.85 365.70 442.71 367.54 439.46 C 369.85 435.79 373.54 434.16 375.23 430.02 C 379.38 429.36 380.97 431.93 384.16 433.83 C 386.80 434.24 389.68 434.25 392.19 433.22 C 396.47 431.56 400.33 432.47 403.03 428.05 C 406.66 428.13 406.96 425.25 409.65 423.54 C 412.43 422.31 416.93 424.98 417.54 421.48 C 418.97 420.50 423.25 421.87 420.88 419.28 L 422.04 418.38 C 425.50 417.94 426.23 415.62 427.98 413.11 C 432.26 411.94 434.34 409.08 437.12 406.00 C 440.21 406.24 438.71 399.92 439.00 397.99 C 439.31 393.99 435.91 395.94 435.56 391.90 C 437.19 389.57 440.06 388.07 441.73 385.76 C 443.00 382.70 444.47 379.74 445.76 376.70 C 448.14 375.48 450.65 374.90 453.23 374.28 L 454.16 374.06 L 455.80 373.66 C 455.39 370.58 454.46 367.64 453.16 364.82 L 453.04 363.90 C 452.23 359.21 452.84 354.64 452.05 349.99 C 451.58 347.54 453.18 346.39 454.18 344.43 C 453.10 342.64 452.91 340.83 452.71 338.78 L 453.13 337.22 C 456.31 336.60 455.21 332.20 453.12 330.78 C 453.08 329.26 453.08 327.74 453.12 326.22 C 456.37 323.94 454.39 318.56 455.19 315.03 C 456.07 311.35 455.02 308.00 454.93 304.32 C 455.71 302.62 456.32 300.86 457.04 299.13 L 458.60 298.54 C 459.13 295.70 459.43 292.86 460.23 290.07 C 461.26 287.38 460.63 284.35 461.85 281.80 C 463.30 278.79 463.71 275.20 464.04 271.90 C 464.46 271.01 464.86 270.11 465.23 269.20 C 466.30 267.09 465.97 264.33 466.03 262.00 C 465.89 255.34 466.15 248.67 465.94 242.02 C 466.07 240.83 465.48 240.07 464.15 239.74 C 463.95 236.58 463.42 235.01 461.13 232.80 C 459.94 228.22 466.69 225.70 467.43 221.02 C 470.07 215.71 471.12 210.99 472.27 205.22 C 473.35 202.15 473.29 198.86 472.35 195.77 C 472.01 194.33 471.61 192.91 471.13 191.51 C 470.87 189.69 471.51 187.25 469.89 186.09 C 467.09 183.66 467.09 180.40 466.96 176.98 C 467.09 173.79 464.98 172.00 463.95 169.09 C 463.13 167.38 463.04 165.67 461.23 164.70 C 460.64 161.70 460.57 158.67 457.91 156.71 C 456.49 153.51 457.40 149.94 456.03 146.64 C 457.65 140.63 453.57 138.82 451.11 134.17 C 448.76 136.27 448.87 134.46 446.76 133.18 C 445.89 132.16 445.29 131.22 444.92 129.92 C 444.25 126.37 441.59 124.45 441.56 120.38 C 437.65 116.09 432.43 113.70 428.97 109.02 C 427.87 107.58 426.86 107.20 425.15 106.73 C 420.52 102.72 415.74 98.97 411.63 94.37 C 410.48 92.82 408.88 93.22 407.17 92.83 L 406.05 92.05 C 405.30 88.10 402.01 87.69 398.96 86.03 C 396.67 83.15 393.71 81.98 392.55 78.39 C 391.75 75.76 389.54 75.08 387.32 73.95 C 386.31 73.23 385.31 72.49 384.29 71.79 C 382.88 69.86 381.31 68.07 379.50 66.51 C 376.78 65.03 373.20 65.01 370.55 63.41 C 367.67 61.23 364.86 59.08 361.72 57.27 C 359.84 55.14 357.71 53.31 355.55 51.46 C 353.39 50.22 350.56 50.16 348.18 49.71 C 345.54 48.07 343.16 46.03 340.43 44.51 C 338.06 43.35 338.12 40.51 336.27 38.74 C 332.92 35.78 328.29 34.76 325.85 31.10 C 323.79 28.87 321.17 28.14 318.27 27.65 C 315.54 27.00 312.73 26.21 309.91 26.10 C 308.62 26.33 307.39 26.80 306.12 27.20 C 300.74 26.69 295.32 25.19 290.01 24.11 C 290.14 19.92 288.48 21.66 285.58 20.48 C 284.08 16.90 281.17 16.92 277.86 16.07 C 274.28 15.27 271.63 14.68 268.64 12.44 C 263.44 11.73 256.98 9.15 251.90 10.67 L 251.09 10.92 C 247.60 11.84 244.06 11.83 240.53 12.36 L 240.18 13.05 L 239.77 13.88 C 237.55 13.97 235.34 13.98 233.12 14.06 C 229.67 14.03 226.53 14.40 224.82 17.78 C 223.85 18.08 222.89 18.41 221.93 18.75 C 215.28 18.81 212.89 24.00 207.07 25.80 L 206.45 26.04 C 205.95 25.04 205.39 24.08 204.76 23.17 C 203.53 23.31 202.28 23.66 201.09 23.96 C 197.37 24.53 195.06 26.87 191.95 28.66 C 186.49 28.70 182.54 35.27 178.90 38.71 C 177.14 39.90 175.94 41.10 174.77 42.88 C 172.08 44.61 170.12 47.00 168.83 49.92 L 167.94 50.94 C 163.55 51.91 162.58 52.75 160.85 56.86 C 158.47 57.78 157.80 58.41 156.75 60.74 C 149.98 62.76 144.16 69.31 139.67 74.56 C 137.44 75.71 136.55 77.26 135.37 79.36 C 131.82 80.69 130.27 82.16 128.21 85.30 C 125.46 87.95 126.26 91.65 123.07 93.95 C 120.20 94.14 120.20 94.59 118.95 96.94 C 116.69 100.88 113.78 102.81 113.82 107.86 C 111.88 109.55 111.20 111.54 110.70 114.00 C 109.51 115.54 108.62 117.08 108.17 119.00 C 107.00 121.87 106.93 124.78 106.84 127.84 C 106.48 128.49 106.13 129.15 105.79 129.81 C 104.58 131.68 104.11 132.97 104.14 135.25 C 103.78 136.80 103.32 138.31 102.82 139.82 C 101.29 142.24 100.45 144.91 99.74 147.67 C 97.10 149.56 97.78 153.79 95.09 156.14 C 95.69 156.55 96.30 156.93 96.92 157.30 C 96.88 159.02 97.11 160.58 96.07 162.09 C 94.70 164.05 93.96 165.73 94.07 168.19 C 92.87 177.96 96.55 186.66 94.31 196.15 C 94.12 197.06 93.93 197.97 93.76 198.89 C 93.19 200.93 92.60 202.90 91.60 204.78 C 92.37 205.24 93.15 205.68 93.94 206.10 C 93.98 207.74 94.02 209.38 94.06 211.03 C 93.98 214.75 94.02 218.47 94.00 222.19 L 93.67 223.01 C 92.01 227.10 90.50 231.36 89.72 235.71 C 86.83 236.54 87.97 242.08 88.75 244.16 C 89.54 246.19 90.00 248.07 90.16 250.26 C 90.18 254.85 92.85 257.80 93.85 262.17 C 93.97 264.38 93.96 266.59 93.76 268.79 C 92.66 271.90 93.58 275.02 91.67 277.57 C 90.82 279.06 91.02 281.17 90.73 282.84 C 90.46 283.84 90.24 284.84 90.07 285.84 L 89.71 287.77 C 89.35 288.77 89.02 289.78 88.72 290.80 C 87.93 293.47 87.60 296.28 87.20 299.03 C 86.97 300.98 86.84 302.94 86.59 304.90 C 86.14 306.97 86.03 309.26 84.99 311.08 C 82.69 314.65 84.07 317.69 83.95 321.63 C 83.54 322.69 83.15 323.75 82.79 324.83 C 81.07 326.89 79.85 328.06 79.86 330.96 C 79.81 335.39 76.39 338.05 76.20 342.28 C 76.04 343.48 75.89 344.68 75.73 345.88 C 75.36 347.15 75.08 348.44 74.83 349.74 C 73.61 350.09 73.04 350.85 73.11 352.03 C 72.93 355.70 71.51 359.21 72.41 362.64 C 73.99 369.00 71.90 376.02 73.72 382.22 C 74.02 383.23 74.35 384.22 74.70 385.22 C 75.03 386.82 75.38 388.41 75.83 389.98 C 76.14 392.00 76.68 393.45 77.87 395.11 C 78.24 395.70 78.61 396.29 78.99 396.88 C 79.53 399.17 80.17 400.53 81.83 402.21 C 82.80 404.97 83.00 406.82 85.94 408.11 L 86.16 408.92 C 86.14 410.23 86.14 411.55 86.13 412.86 L 85.95 414.91 C 81.76 416.47 76.85 415.19 72.98 416.88 L 71.73 417.56 C 70.30 418.17 69.41 418.30 68.78 419.87 C 67.74 420.44 66.65 420.97 65.66 421.62 C 62.98 426.03 59.06 428.76 55.78 432.71 C 52.78 435.65 50.84 440.66 49.76 444.70 C 48.73 446.40 47.63 448.06 46.61 449.77 C 44.95 451.93 44.71 454.34 43.94 456.87 L 42.78 457.78 C 40.77 458.68 40.67 460.93 39.85 462.76 C 36.69 465.96 35.95 470.58 33.72 474.67 C 32.71 478.26 29.94 480.64 29.35 484.33 C 28.51 487.81 29.87 491.72 27.71 494.58 C 26.91 496.07 27.04 498.02 26.56 499.64 C 21.90 505.49 17.86 513.38 17.75 521.00 L 0.00 521.00 L 0.00 0.00 Z" fill="#ffffff" />
	<path d="M 268.64 12.44 C 271.63 14.68 274.28 15.27 277.86 16.07 C 281.79 19.38 284.81 22.82 290.01 24.11 C 295.32 25.19 300.74 26.69 306.12 27.20 C 304.87 27.62 303.60 27.98 302.35 28.41 C 302.09 29.66 301.91 30.92 301.79 32.20 C 298.37 28.39 294.61 29.16 290.18 27.65 C 287.59 26.02 284.84 26.18 282.02 25.38 C 282.77 24.97 283.49 24.51 284.18 24.00 C 282.26 21.17 278.92 19.16 276.16 17.17 C 276.09 18.30 276.05 19.42 276.02 20.55 L 275.39 21.25 C 274.28 17.66 273.31 18.28 270.02 17.87 C 267.26 17.95 267.13 14.79 264.21 15.08 C 260.70 14.79 257.57 13.60 254.26 14.18 C 254.13 15.06 254.03 15.95 253.95 16.84 C 252.56 16.71 253.13 14.18 253.13 13.24 C 255.43 12.97 257.74 12.95 260.03 12.70 C 257.46 11.36 254.77 10.88 251.90 10.67 C 256.98 9.15 263.44 11.73 268.64 12.44 Z" fill="#9aa773" />
	<path d="M 251.09 10.92 L 250.60 12.72 C 247.20 13.28 243.62 12.91 240.18 13.05 L 240.53 12.36 C 244.06 11.83 247.60 11.84 251.09 10.92 Z" fill="#a5b08b" />
	<path d="M 251.09 10.92 L 251.90 10.67 C 254.77 10.88 257.46 11.36 260.03 12.70 C 257.74 12.95 255.43 12.97 253.13 13.24 C 253.13 14.18 252.56 16.71 253.95 16.84 C 256.45 17.91 258.97 18.82 261.66 19.33 C 262.46 20.23 263.30 21.09 264.14 21.95 C 263.24 27.78 259.02 18.42 257.81 23.85 C 255.29 21.46 253.81 18.38 250.21 17.72 C 250.08 16.55 249.91 15.39 249.72 14.23 C 246.44 13.82 243.07 14.02 239.77 13.88 L 240.18 13.05 C 243.62 12.91 247.20 13.28 250.60 12.72 L 251.09 10.92 Z" fill="#788961" />
	<path d="M 233.12 14.06 C 231.80 15.20 230.53 16.37 229.07 17.35 L 227.68 17.96 C 226.73 17.90 225.78 17.84 224.82 17.78 C 226.53 14.40 229.67 14.03 233.12 14.06 Z" fill="#989c6b" />
</svg>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
"use strict";
const lui = document.getElementById('lui');
const paths = document.getElementById('limage').children;
//console.log( paths );
for( let i=0, lg=paths.length; i<lg; i++ )
{
  setTimeout(function(){ 
    lui.appendChild(paths[i].cloneNode());
  }, i*500); // apparition progressive
}

**javatwister** · 31/12/2019, 16h05

Ne voyant toujours pas pourquoi ce topic est si long...; en tout cas, je viens de me rappeler qu'il faut inclure les balises;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
const string = document.getElementById('limage');
const lui = document.getElementById('lui');
string.querySelectorAll("path").forEach(v=>{lui.appendChild(v)})

Invité · 31/12/2019, 16h07

Envoyé par javatwister

...mais l'intérêt de la manip m'échappe toujours;

Il me semble que c'est justement l'apparition progressive du dessin.

Du coup, ça me fait penser à une AUTRE solution !
Plus simple :

une seul <svg>
on masque les <path> (en CSS)
on les fait apparaitre progressivement

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
svg#lui { margin: auto; display: block; width: 80%; height:800px; max-width:900px; }
svg#lui path { display:none; }

(ici : tête de lion et tigre)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<svg id="lui" width="800pt" height="491pt" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0,491) scale(0.2,-0.2)" fill="purple" stroke="none">
	<path d="M452 2209 c43 -40 59 -62 34 -50 -57 28 -112 27 -95 -1 9 -15 -1 -14 -30 2 -30 15 -79 18 -148 8 -57 -9 -110 -14 -118 -12 -25 7 -17 -32 10 -43 14 -5 1 -11 -28 -11 -63 -2 -77 -32 -77 -164 0 -99 45 -141 73 -68 7 19 37 30 79 30 47 0 68 9 68 30 0 17 10 30 21 30 12 0 17 8 11 17 -6 10 14 14 44 11 l54 -7 -55 23 c-68 29 -73 62 -6 36 51 -19 92 7 46 28 -14 7 2 7 35 0 73 -16 83 -16 165 3 48 10 65 7 65 -12 0 -15 18 -46 41 -70 49 -52 65 -124 37 -167 -18 -27 -19 -26 -12 9 10 48 -66 94 -109 67 -21 -14 -20 -17 6 -18 19 0 36 -21 42 -50 11 -59 -16 -68 -31 -10 -6 22 -23 40 -39 40 -39 0 -36 -60 3 -62 21 -1 23 -5 7 -11 -14 -6 -19 -21 -11 -34 8 -13 16 -50 18 -83 5 -107 7 -115 38 -103 16 7 30 5 31 -3 0 -8 22 -30 48 -49 47 -34 47 -34 33 20 -8 30 -34 64 -58 75 -24 11 -44 25 -44 33 0 22 118 56 130 37 22 -36 90 7 168 106 24 31 23 39 -10 66 -21 17 -27 25 -14 19 18 -9 24 12 21 77 -3 61 -11 84 -26 72 -25 -22 -109 -18 -109 4 0 9 11 16 23 16 13 0 3 22 -22 49 -54 57 -6 61 60 5 50 -43 61 -43 45 1 -14 38 22 12 128 -92 43 -42 44 -45 7 -33 -68 21 -46 -10 29 -41 39 -16 70 -39 70 -51 0 -13 15 -17 34 -9 19 7 28 7 20 -1 -8 -8 -1 -35 15 -60 26 -39 26 -46 -1 -56 -55 -21 -74 -14 -48 18 20 24 19 30 -6 30 -18 0 -44 -17 -59 -39 -15 -21 -51 -44 -81 -52 -30 -7 -54 -21 -54 -29 0 -9 18 -11 41 -6 22 6 39 3 38 -6 -6 -32 25 -108 44 -108 10 0 12 24 4 53 -12 48 -9 52 35 41 47 -12 47 -11 8 20 -28 22 -30 28 -7 20 17 -6 42 -1 54 11 16 16 25 13 34 -10 8 -21 29 -29 61 -23 48 9 48 8 21 -57 -15 -36 -39 -63 -52 -60 -13 4 -19 -3 -12 -13 6 -11 3 -25 -9 -32 -11 -7 -20 -4 -20 6 0 26 -70 43 -100 24 -19 -12 -19 -17 0 -23 20 -7 20 -18 -2 -52 -21 -34 -22 -49 -3 -68 16 -16 17 -35 3 -60 -15 -28 -12 -37 11 -37 27 0 66 48 68 86 2 35 110 143 118 119 6 -17 21 -10 46 20 42 50 51 35 18 -28 -16 -29 -15 -47 2 -68 13 -16 17 -29 9 -29 -8 0 -4 -14 10 -30 19 -23 32 -25 53 -8 21 18 27 16 27 -9 0 -18 -26 -45 -58 -62 -78 -40 -162 -144 -162 -200 0 -34 -15 -50 -52 -60 -35 -9 -48 -22 -40 -43 6 -16 -1 -34 -17 -40 -40 -16 -56 -68 -29 -100 12 -15 17 -41 11 -58 -6 -16 -2 -80 11 -141 16 -83 16 -117 -1 -134 -17 -17 -23 -13 -24 16 0 38 -1 38 -29 1 -16 -21 -24 -46 -18 -56 6 -10 1 -31 -13 -47 -13 -15 -18 -43 -11 -62 11 -26 7 -28 -16 -9 -22 18 -31 18 -40 -2 -7 -14 -9 -6 -4 19 9 47 -47 34 -80 -18 -9 -14 -5 -18 9 -9 13 8 23 2 23 -16 0 -16 -10 -36 -22 -43 -12 -7 -39 -42 -61 -76 l-40 -63 16 80 c9 44 16 118 16 163 0 46 9 82 21 80 12 -2 20 61 21 162 1 90 -6 153 -15 140 -10 -16 -16 -7 -18 25 l-2 50 -14 -50 c-14 -48 -15 -48 -28 17 -23 112 -16 273 16 363 35 100 35 100 12 100 -10 0 -23 -31 -31 -69 -15 -81 -57 -120 -51 -48 7 83 1 88 -32 27 -33 -64 -54 -670 -23 -670 8 0 15 -24 15 -54 0 -103 43 -15 54 112 11 114 -12 166 -41 97 -6 -14 -8 11 -3 55 4 44 8 129 9 188 1 124 14 131 23 12 4 -44 15 -86 24 -92 10 -7 18 -48 18 -90 1 -58 5 -68 16 -38 12 32 18 34 26 10 20 -57 28 -140 14 -140 -8 0 -27 -56 -42 -125 -34 -156 -33 -151 -35 -176 -2 -12 -13 -15 -26 -7 -15 9 -18 5 -8 -10 8 -14 2 -40 -15 -58 -16 -19 -35 -53 -42 -77 -8 -24 -26 -48 -42 -54 -19 -8 -25 0 -17 23 9 30 8 30 -13 -1 -12 -19 -16 -46 -8 -58 8 -14 5 -18 -8 -10 -11 8 -27 4 -35 -8 -9 -15 26 -20 111 -15 l125 6 36 90 37 90 1 -79 1 -80 60 66 c48 52 60 58 62 29 1 -28 4 -29 13 -6 6 17 24 39 39 50 15 11 35 47 45 80 17 58 18 57 19 -26 1 -48 -7 -106 -19 -130 -20 -41 -19 -41 8 -8 16 20 40 94 53 164 31 163 80 218 71 78 -4 -51 0 -82 8 -69 9 13 23 23 33 22 10 -1 24 27 30 63 8 41 15 51 18 26 2 -22 13 -2 23 45 13 57 30 86 53 87 123 9 161 34 185 121 12 45 17 93 12 107 -6 14 11 46 37 70 44 41 62 145 24 134 -9 -2 -26 13 -38 33 -17 31 -24 33 -40 10 -13 -19 -15 -14 -6 18 7 26 4 45 -8 45 -11 0 -16 12 -10 28 8 20 28 23 79 12 80 -18 83 -14 29 55 -25 31 -40 81 -40 129 0 66 -6 77 -35 68 -54 -17 -99 18 -56 42 30 17 28 23 -18 54 -29 18 -47 43 -40 53 7 11 0 18 -14 14 -14 -3 -29 13 -32 35 -5 36 88 114 141 119 8 0 24 15 34 31 17 26 19 25 20 -4 0 -19 29 -50 65 -68 148 -74 165 -143 50 -205 -61 -34 -86 -60 -88 -95 -3 -56 5 -59 46 -18 46 47 67 36 67 -35 1 -49 5 -58 20 -35 11 17 20 51 20 77 0 26 18 62 40 80 36 29 38 40 17 97 -19 50 -19 75 0 117 36 80 -36 150 -168 160 -64 5 -249 84 -249 107 0 7 -63 44 -140 82 -76 39 -139 80 -140 92 0 12 -22 48 -50 80 -27 32 -50 65 -50 73 0 8 -13 15 -30 15 -16 0 -30 11 -30 25 -1 18 -5 18 -18 -2 -11 -18 -22 -20 -30 -6 -7 11 -43 16 -80 10 -36 -6 -86 -1 -109 12 -38 20 -43 17 -43 -20 l0 -42 -64 46 c-35 24 -57 34 -48 21 20 -33 -26 -29 -88 6 -86 49 -90 33 -8 -41z m282 -181 c-25 -26 -94 36 -94 84 l0 51 52 -62 c29 -35 48 -68 42 -73z m526 -198 c13 -16 30 -26 38 -22 7 5 32 -2 56 -15 56 -30 33 -72 -46 -84 -62 -9 -138 26 -94 44 17 7 18 24 5 58 -20 54 3 65 41 19z m71 -697 c18 7 24 -6 20 -41 -3 -29 1 -52 8 -52 7 0 29 -36 49 -80 35 -80 62 -100 76 -58 9 28 116 42 116 15 0 -11 -19 -17 -43 -13 -29 4 -47 -8 -59 -39 -10 -27 -9 -45 3 -45 10 0 20 11 21 25 1 19 4 18 12 -1 11 -30 -48 -83 -94 -83 -24 0 -25 3 -3 17 15 9 24 33 20 53 -7 34 -9 34 -40 3 -28 -28 -35 -29 -44 -3 -7 16 -35 29 -62 29 -28 0 -51 10 -51 21 0 12 10 15 23 7 13 -8 18 -3 12 14 -5 15 -18 26 -29 24 -22 -4 -33 140 -15 197 9 28 19 35 33 21 12 -12 33 -16 47 -11z m-86 -339 c4 9 6 5 3 -8 -11 -44 73 -124 143 -138 38 -7 75 -22 82 -33 8 -12 3 -15 -10 -7 -14 9 -23 0 -23 -22 -1 -30 -4 -31 -20 -6 -11 17 -20 20 -20 7 0 -45 -126 -73 -155 -34 -14 19 -25 26 -26 16 0 -17 -79 189 -79 207 0 5 16 2 35 -5 28 -11 30 -8 10 12 -40 40 -29 67 13 29 21 -19 42 -27 47 -18z"/>
	<path d="M428 1980 c-64 -68 -76 -79 -124 -119 -26 -21 -44 -45 -40 -54 3 -10 -25 -19 -64 -21 -139 -8 -200 -38 -200 -96 0 -38 8 -44 45 -35 39 10 42 8 19 -20 -23 -28 -21 -30 15 -21 50 13 53 37 6 56 -30 12 -28 17 15 33 36 14 54 12 70 -9 11 -15 31 -24 45 -19 14 5 25 -6 25 -25 0 -19 9 -27 23 -18 16 10 19 -1 10 -36 -7 -28 -6 -56 1 -64 8 -7 16 -51 20 -98 10 -137 19 -202 35 -239 9 -19 10 -58 3 -85 -7 -29 -4 -50 8 -50 11 0 20 -28 20 -61 0 -34 -8 -56 -18 -50 -10 6 -10 -23 1 -70 13 -62 11 -88 -11 -110 -37 -36 -61 117 -45 276 9 77 7 92 -7 55 -14 -37 -17 -12 -14 98 2 96 -4 151 -19 156 -14 5 -23 -21 -24 -68 0 -42 -6 -152 -12 -246 -7 -93 -13 -260 -15 -370 -2 -136 -7 -175 -16 -120 l-13 80 -15 -60 c-37 -142 -56 -190 -73 -179 -11 6 -13 -26 -6 -77 7 -56 4 -94 -11 -103 -12 -7 -22 -34 -22 -58 0 -25 -8 -54 -19 -64 -11 -12 -7 -34 12 -59 31 -40 31 -40 19 2 -8 26 -1 52 18 68 16 14 30 43 30 66 0 22 15 58 34 79 27 30 29 41 9 53 -21 13 -19 19 5 29 20 7 32 36 32 72 0 66 32 83 46 26 5 -19 6 -15 4 10 -2 25 3 45 13 45 20 0 20 16 -3 -221 -10 -105 -24 -207 -32 -227 -11 -29 -4 -34 43 -29 31 4 60 20 65 35 7 20 -3 25 -33 17 -30 -8 -43 -2 -43 19 0 17 12 26 26 20 19 -7 25 8 21 53 -5 57 -4 58 10 13 16 -49 16 -49 26 14 5 35 2 59 -6 54 -9 -6 -11 4 -5 21 7 17 21 31 31 31 11 0 14 19 6 43 -8 27 -6 37 7 29 41 -25 11 308 -30 342 -20 16 -26 24 -13 18 38 -19 75 47 79 145 3 51 11 119 19 151 10 40 8 54 -7 44 -12 -7 -9 12 7 42 35 67 41 174 7 126 -16 -22 -19 -6 -12 65 6 62 28 119 63 165 29 38 44 70 32 70 -12 0 -21 15 -21 33 0 19 -14 49 -31 68 -87 96 -40 319 66 319 16 0 24 11 20 25 -5 14 -25 22 -44 19 -21 -4 -30 2 -22 15 21 34 1 24 -41 -19z m-80 -392 c7 -17 11 -55 10 -85 l-1 -53 -25 55 c-13 31 -30 50 -37 43 -7 -6 -7 7 -1 30 13 50 37 54 54 10z"/>
	<path d="M2534 1838 c-40 -6 -84 -22 -100 -34 -15 -13 -85 -32 -156 -43 -70 -11 -173 -33 -228 -48 l-100 -28 1 -154 c1 -124 8 -159 35 -174 21 -11 34 -43 34 -81 0 -61 1 -61 40 -26 22 20 40 48 40 63 0 61 125 2 217 -103 56 -64 62 -81 50 -154 -9 -60 -7 -78 10 -68 13 8 23 3 23 -12 -1 -61 -48 -83 -185 -85 -59 -1 -73 -7 -63 -31 7 -16 11 -68 10 -115 -7 -175 102 -237 207 -118 101 114 231 139 231 44 0 -33 15 -50 50 -59 36 -9 50 -26 50 -60 0 -26 14 -58 30 -72 25 -20 30 -19 30 8 0 18 14 38 30 45 20 8 31 42 32 104 2 51 7 78 12 59 7 -29 17 -30 58 -11 29 13 45 33 39 50 -6 15 -3 22 7 16 10 -6 29 3 42 19 14 17 18 30 10 30 -9 0 9 19 38 42 29 23 66 37 81 31 31 -12 131 57 131 90 0 11 -24 1 -53 -22 -72 -56 -128 -57 -77 -1 33 36 41 79 48 243 2 59 120 152 144 114 9 -14 18 -12 26 6 7 15 8 0 2 -33 l-10 -60 29 50 c26 45 30 46 31 10 0 -33 4 -35 20 -10 17 27 19 27 20 0 1 -25 4 -25 18 -2 29 45 66 7 40 -41 -19 -37 -17 -40 25 -29 29 7 23 1 -16 -17 -62 -29 -187 -168 -187 -208 0 -12 -20 -40 -45 -64 -29 -27 -34 -40 -15 -35 16 3 45 31 65 61 23 36 52 55 85 55 33 0 50 11 50 32 0 20 11 28 29 21 17 -6 38 3 48 20 12 22 22 25 31 9 8 -12 0 -28 -17 -35 -52 -19 -97 -120 -62 -134 19 -7 25 -1 18 16 -5 16 8 38 30 49 50 27 69 28 53 2 -8 -12 5 -13 34 -2 25 9 49 33 52 54 5 35 4 36 -16 3 -12 -19 -31 -35 -42 -35 -31 0 -12 126 20 136 20 7 24 -1 16 -23 -9 -24 -2 -33 28 -33 22 0 35 -8 29 -18 -6 -10 8 -13 31 -7 33 8 41 3 35 -27 -4 -22 -25 -39 -50 -40 -56 -3 -87 -24 -87 -60 0 -23 14 -22 77 11 l77 39 26 -47 c13 -26 19 -57 11 -69 -8 -13 2 -23 23 -24 21 0 26 -5 11 -11 -39 -16 -29 -47 10 -34 30 11 30 8 -3 -17 -21 -17 -32 -40 -24 -53 9 -14 2 -23 -17 -23 -21 0 -30 -18 -29 -55 0 -30 6 -44 11 -30 6 14 19 20 29 14 10 -6 24 3 30 20 21 53 48 34 40 -29 -7 -62 17 -101 33 -55 5 14 10 -16 11 -65 3 -98 -33 -192 -38 -100 -2 42 -4 43 -12 10 -6 -22 -19 -51 -31 -65 -14 -17 -13 -25 4 -25 16 0 14 -10 -6 -30 -20 -20 -25 -47 -15 -83 21 -81 55 -78 71 4 16 85 24 83 40 -7 7 -39 3 -64 -10 -64 -12 0 -16 -9 -9 -20 7 -11 2 -20 -11 -20 -13 0 -18 -14 -11 -31 6 -17 3 -26 -7 -20 -10 7 -24 3 -30 -8 -8 -12 16 -19 58 -17 76 3 104 95 47 152 -17 17 -17 24 -2 24 41 0 32 361 -9 393 -28 22 -29 25 -3 16 72 -25 50 235 -31 355 -175 261 -320 454 -414 550 -75 77 -99 116 -91 145 8 34 1 41 -44 41 -33 0 -74 20 -103 51 -88 93 -482 150 -745 107z m-47 -98 c-32 -63 -42 -69 -82 -44 -18 12 -14 25 15 50 22 18 40 27 40 20 0 -8 11 -3 24 10 36 36 36 30 3 -36z m406 16 c24 -19 25 -65 1 -89 -7 -7 -2 -27 11 -43 21 -25 20 -28 -5 -19 -142 57 -182 62 -216 27 -32 -32 -32 -33 1 -21 37 14 50 -20 16 -41 -12 -7 -13 -30 -1 -60 14 -38 12 -46 -10 -37 -15 5 -23 23 -17 39 7 17 -1 28 -21 28 -18 0 -32 13 -32 28 0 16 -6 45 -13 65 -7 21 -6 31 2 23 21 -19 71 33 71 73 0 37 42 41 76 7 18 -18 24 -18 24 -1 0 14 14 18 35 11 31 -12 32 -9 7 21 -30 37 19 29 71 -11z m270 -68 c-4 -21 -17 -56 -29 -78 -12 -22 -20 -47 -18 -56 3 -9 -9 -30 -26 -46 -16 -17 -31 -23 -33 -14 -27 175 -11 238 58 235 42 -3 53 -12 48 -41z m-592 -103 c-20 -20 -131 -23 -131 -3 0 35 129 75 137 43 3 -15 1 -34 -6 -40z m764 40 c-19 -22 -27 -58 -21 -97 8 -54 1 -68 -59 -105 -76 -47 -115 -54 -115 -22 0 12 7 17 16 12 9 -6 29 -1 45 10 22 15 16 18 -25 12 -77 -13 -90 39 -15 55 33 7 54 22 48 32 -6 10 7 18 30 18 22 0 40 7 39 15 -7 44 4 86 21 76 10 -6 24 -3 31 9 7 11 18 20 24 20 7 0 -2 -16 -19 -35z m-1075 -26 c0 -11 -17 -19 -38 -19 -48 0 -184 -58 -138 -59 18 -1 56 8 85 19 67 25 66 -7 -1 -37 -41 -19 -50 -34 -40 -71 8 -32 -1 -58 -28 -82 -39 -35 -40 -35 -40 7 0 65 -3 71 -41 98 -57 40 -23 161 35 128 20 -11 56 -5 103 18 72 35 103 34 103 -2z m63 -4 c31 -59 81 -96 113 -85 14 5 21 2 16 -7 -25 -41 109 -109 138 -70 15 20 34 30 43 21 9 -9 6 -22 -6 -30 -33 -22 -46 -124 -16 -124 15 0 31 -20 36 -45 5 -25 8 -13 6 25 -4 88 73 115 108 36 18 -42 19 -41 11 14 -5 33 3 87 18 120 15 33 30 78 34 100 9 56 61 50 78 -10 8 -27 15 -40 16 -27 1 13 19 19 42 13 43 -12 52 -36 20 -56 -25 -15 -26 -50 -2 -50 9 0 22 19 28 43 11 38 15 39 43 11 17 -17 25 -45 19 -63 -7 -17 -5 -47 3 -66 23 -51 30 -130 15 -165 -7 -16 -14 -34 -16 -40 -30 -94 -81 -178 -113 -187 -22 -5 -45 -29 -51 -51 -6 -23 -18 -37 -27 -32 -9 6 -22 -16 -29 -48 -18 -82 -65 -120 -65 -53 0 28 12 61 28 73 15 13 27 34 27 48 0 14 14 31 30 37 17 7 30 26 30 42 0 29 24 40 67 33 9 -2 13 8 7 22 -5 14 6 43 24 64 30 36 30 37 -13 14 -25 -13 -45 -32 -45 -43 0 -10 -16 -19 -36 -19 -22 0 -50 -28 -70 -71 -21 -43 -43 -66 -57 -57 -16 9 -16 3 -3 -21 15 -27 8 -47 -32 -88 -45 -45 -47 -53 -17 -59 40 -8 43 -21 15 -64 -15 -24 -19 -24 -20 -3 0 23 -5 23 -32 2 -29 -25 -66 -2 -68 42 0 6 -20 33 -44 59 -46 49 -54 177 -12 203 14 8 14 16 0 25 -11 7 -30 -13 -41 -43 -20 -54 -20 -54 -21 20 -1 41 0 78 3 82 3 4 -5 19 -18 35 -12 15 -29 59 -37 97 -10 45 -51 102 -122 170 -104 99 -106 104 -76 148 18 25 27 63 22 84 -14 53 19 49 49 -6z m159 -770 c-39 -78 -167 -166 -235 -163 -21 0 -26 6 -12 11 14 6 25 21 25 34 0 31 91 72 136 60 25 -7 45 11 69 62 19 39 39 71 45 71 6 0 -6 -34 -28 -75z"/>
	<path d="M2890 1395 c-24 -77 -27 -95 -12 -86 8 5 31 -10 52 -34 36 -42 37 -42 51 -4 16 43 5 75 -20 60 -9 -6 -16 1 -16 14 4 99 -29 130 -55 50z"/>
	<path d="M873 1620 c-7 -35 -21 -57 -33 -50 -11 7 -20 -2 -20 -20 0 -18 -8 -27 -18 -21 -24 14 -18 -155 6 -172 10 -7 23 -66 28 -130 5 -64 23 -138 40 -163 23 -35 24 -52 7 -69 -27 -27 -31 -62 -5 -46 11 6 13 -16 6 -54 -7 -36 -12 -94 -12 -129 1 -35 -6 -59 -16 -54 -25 16 -19 -41 8 -68 50 -50 61 -22 47 116 -10 104 -7 139 10 135 13 -3 34 30 46 72 13 43 31 69 40 60 10 -10 11 5 3 33 -14 47 -26 60 -83 96 -13 8 -29 50 -37 94 -10 59 -7 72 8 50 13 -18 22 -20 22 -7 0 38 -23 87 -37 79 -23 -14 -23 154 0 181 12 15 15 27 7 27 -8 0 -5 12 6 26 12 14 14 37 6 51 -11 18 -20 6 -29 -37z"/>
	<path d="M122 1509 c-70 -80 -76 -93 -30 -75 28 10 29 6 8 -33 -17 -32 -17 -42 -1 -32 27 17 10 -69 -30 -154 -16 -35 -18 -51 -4 -42 13 8 17 3 10 -15 -45 -112 -45 -111 0 -72 22 20 51 79 64 130 13 51 35 100 47 109 23 14 -2 42 -54 61 -10 3 1 48 24 100 50 113 47 115 -34 23z"/>
	<path d="M1469 1529 c34 -26 29 -38 -14 -31 -8 1 -15 -7 -15 -18 0 -11 18 -20 40 -20 22 0 40 8 40 18 0 10 5 31 10 46 8 18 -7 28 -45 31 -52 4 -53 3 -16 -26z"/>
	<path d="M620 1480 c0 -11 -10 -18 -22 -15 -13 3 -28 -8 -33 -23 -7 -18 -2 -22 16 -12 19 12 22 5 13 -30 -7 -26 -4 -38 6 -28 22 23 48 128 32 128 -7 0 -12 -9 -12 -20z"/>
	<path d="M1225 1378 c-50 -19 -62 -57 -15 -50 34 5 82 47 69 59 -5 5 -29 1 -54 -9z"/>
	<path d="M456 1223 c-12 -164 -1 -244 26 -200 10 15 18 58 18 95 0 38 15 85 33 105 20 22 24 37 10 37 -13 0 -23 25 -23 55 -1 39 -6 47 -18 28 -14 -23 -19 -23 -26 0 -5 15 -14 -39 -20 -120z"/>
	<path d="M562 1218 c-27 -77 -28 -98 -4 -98 19 0 51 138 36 153 -5 5 -19 -20 -32 -55z"/>
	<path d="M543 1010 c-23 -38 -32 -70 -21 -70 11 0 14 -10 6 -23 -8 -13 -16 -110 -17 -215 -2 -106 3 -165 9 -132 7 33 23 58 36 55 13 -3 24 13 24 35 0 22 8 40 19 40 10 0 17 17 16 39 -2 21 -12 33 -22 27 -11 -7 -15 53 -9 151 11 188 13 184 -41 93z"/>
	<path d="M804 990 c0 -73 4 -90 18 -65 12 21 12 59 1 99 -17 63 -18 61 -19 -34z"/>
	<path d="M42 973 c-23 -37 -41 -85 -40 -105 1 -28 4 -30 12 -8 5 17 27 64 48 105 47 93 35 98 -20 8z"/>
	<path d="M3563 868 c-13 -28 -18 -60 -11 -71 6 -11 -1 -35 -17 -53 -54 -64 -60 -94 -8 -40 29 30 53 73 53 95 0 30 13 41 49 41 27 0 54 9 61 20 7 12 23 15 36 7 18 -9 18 -6 0 13 -20 22 -30 21 -57 -1 -29 -24 -37 -23 -58 6 -23 31 -27 30 -48 -17z"/>
	<path d="M3405 815 c-36 -21 -65 -47 -65 -57 0 -10 -13 -18 -30 -18 -36 0 -42 -110 -8 -131 15 -10 18 0 9 29 -8 24 -7 42 2 40 39 -6 67 3 67 23 0 12 -11 15 -25 6 -17 -10 -16 -3 3 20 15 19 32 29 38 24 6 -6 22 -1 37 12 15 12 27 15 27 7 0 -8 14 -4 30 10 73 61 5 89 -85 35z"/>
	<path d="M3006 674 c-7 -11 -3 -14 9 -7 11 7 25 -5 31 -27 11 -41 54 -56 54 -19 0 12 9 16 20 9 11 -7 20 -3 20 9 0 11 -13 21 -30 21 -16 0 -30 8 -30 17 0 23 -59 21 -74 -3z"/>
	<path d="M3697 674 c-4 -28 -9 -81 -16 -164 -5 -59 -5 -60 -21 -10 -9 28 -17 36 -18 18 -2 -32 -123 -178 -147 -178 -6 0 -7 20 -1 45 8 36 5 39 -12 15 -12 -16 -16 -46 -10 -65 6 -19 -1 -40 -16 -45 -22 -9 -45 -110 -24 -110 4 0 22 29 40 65 38 74 67 98 102 86 14 -5 39 11 57 35 32 43 32 43 25 -29 -6 -63 -2 -72 31 -66 45 9 70 29 36 29 -13 0 -23 14 -23 32 0 19 11 28 28 22 32 -13 19 67 -14 89 -11 7 -1 18 22 26 22 7 46 27 53 45 21 54 -10 58 -49 6 l-38 -50 6 50 c3 28 16 70 29 94 29 55 29 59 -7 73 -16 7 -32 1 -33 -13z"/>
	<path d="M84 613 c-28 -77 -32 -173 -6 -173 14 0 45 219 33 234 -2 3 -14 -25 -27 -61z"/>
	<path d="M3162 615 l3 -65 13 60 c18 82 46 14 29 -71 -10 -50 -7 -58 20 -47 37 14 45 98 12 119 -14 8 -14 21 2 41 20 23 14 28 -29 28 -46 0 -52 -8 -50 -65z"/>
	<path d="M2890 640 c-7 -12 -20 -16 -30 -10 -9 5 -12 -6 -7 -26 5 -20 -4 -49 -22 -63 -34 -28 -44 -111 -11 -91 12 7 20 -12 20 -45 0 -88 21 -92 73 -16 53 78 71 191 19 120 -42 -58 -63 -19 -39 72 21 79 20 97 -3 59z"/>
	<path d="M3371 577 c7 -23 -3 -38 -32 -47 -32 -11 -37 -20 -20 -37 17 -17 27 -15 41 7 10 16 23 24 29 18 6 -6 -30 -55 -79 -109 -50 -54 -90 -113 -90 -132 0 -19 -15 -49 -32 -67 -18 -17 -26 -38 -18 -46 9 -8 20 -2 25 12 5 14 25 41 44 60 35 34 70 102 65 127 -2 7 10 18 27 24 16 7 29 2 29 -9 0 -11 9 -15 20 -8 41 25 18 -34 -30 -78 -58 -54 -61 -65 -20 -65 17 0 25 4 20 10 -6 5 7 29 28 52 56 61 72 129 33 143 -24 10 -27 19 -10 39 12 15 35 22 50 16 16 -6 29 -1 29 12 0 13 -11 17 -23 9 -16 -10 -19 -3 -10 22 12 30 9 32 -17 10 -25 -20 -30 -19 -30 8 0 17 9 32 20 32 11 0 20 8 20 19 0 10 -18 17 -40 16 -28 -3 -37 -14 -29 -38z"/>
	<path d="M3020 530 c0 -16 -9 -30 -20 -30 -11 0 -20 -15 -20 -33 0 -31 3 -31 37 0 77 70 71 -72 -7 -191 -60 -90 -74 -95 -68 -21 9 116 1 140 -33 96 -32 -43 -38 -146 -10 -190 12 -19 8 -53 -9 -95 l-28 -66 179 0 179 0 0 65 c1 44 6 56 18 38 12 -19 21 -21 31 -5 7 12 3 22 -10 22 -17 0 -16 10 3 35 24 31 22 31 -16 -1 -23 -21 -48 -59 -55 -85 -6 -28 -26 -49 -45 -49 -27 0 -29 5 -10 24 50 50 29 76 -41 49 -36 -14 -78 -25 -95 -24 -16 1 -38 -7 -47 -18 -10 -12 -12 -6 -5 16 7 20 13 47 13 60 1 12 9 5 18 -17 15 -36 20 -33 48 32 36 84 92 139 95 95 3 -32 32 75 36 130 2 33 -2 34 -31 11 -29 -25 -31 -22 -17 22 36 117 36 113 12 80 -22 -31 -29 -16 -22 49 3 35 0 36 -32 10 -22 -18 -30 -19 -21 -4 9 14 6 25 -6 25 -11 0 -21 -13 -21 -30z"/>
	<path d="M620 465 c-3 -25 -7 -56 -8 -70 -1 -14 -13 -37 -27 -51 -14 -15 -25 -39 -25 -53 0 -27 -66 -192 -104 -261 -20 -35 -19 -37 10 -13 17 14 47 68 66 120 19 51 41 101 50 110 8 10 10 32 3 49 -8 20 -4 26 11 16 29 -17 50 62 39 141 -8 48 -10 50 -15 12z"/>
	<path d="M161 208 c-49 -144 -43 -179 18 -106 31 38 56 238 29 238 -1 0 -23 -59 -47 -132z"/>
	<path d="M405 232 c-47 -96 -84 -265 -47 -212 12 17 22 45 22 63 0 19 10 37 22 41 29 10 81 161 61 181 -8 8 -34 -25 -58 -73z"/>
	<path d="M3619 182 c15 -29 13 -41 -11 -50 -17 -7 -28 -23 -23 -37 5 -14 -1 -34 -13 -45 -13 -11 -19 -18 -14 -15 5 2 21 -6 36 -18 36 -30 40 -23 56 85 11 75 8 95 -19 105 -26 10 -28 5 -12 -25z"/>
	<path d="M3380 170 c18 -21 13 -29 -24 -35 -44 -8 -44 -9 -6 -25 22 -9 47 -27 56 -39 9 -11 11 -2 4 22 -8 30 -2 46 19 50 21 5 15 14 -21 31 -42 20 -47 19 -28 -4z"/>
	<path d="M3442 61 c-15 -9 -42 -12 -61 -7 -18 5 -46 -6 -61 -24 -24 -29 -18 -32 58 -27 46 3 93 16 104 29 25 30 -4 51 -40 29z"/>
</g>
</svg>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
"use strict";
const lui = document.querySelector('#lui');
const paths = document.querySelectorAll('#lui path');
for( let i=0, lg=paths.length; i<lg; i++ )
{
  setTimeout(function(){ 
    paths[i].style.display = 'block';
  }, i*500); // apparition progressive
}

Invité · 31/12/2019, 16h09

Envoyé par javatwister

Ne voyant toujours pas pourquoi ce topic est si long...

Manifestement, parce qu'on n'a rien d'autre à foutre un 31 décembre.......

**JPBruneau** · 31/12/2019, 17h54

Pas le temps de faire les coures, vous avez bossé tout les deux , trop super,

j'ai honte après vous avoir choqué par mes propos .

Oui jreau62 c'est pour faire apparaître et faire découvrir les visages, c'est super ! (pour le mariage d'un de mes enfant je l'avais réalisé.
mais voila impossible de refaire marché (pour le moment) ce script réalisé par le grand G1Doot ,qui m'a promis une version Windows 10 et ta solution CSS me parait de loin le TOP !
parce que notre version de l'époque avait une étoile bleu qui "traçait" les contours de chaque couleur qui ensuite se remplissaient !!. je vous mettrais un lien sur ou nous en sommes.
sans le traçage.
et toi javatwister voila la démarche, un visage jpeg ou bmp, 500*500 c'est 1800 lignes c'est superbement généré en SVG avec mon abonnement, https://fr.vectormagic.com/
je reçois alors ce code un vrais SVG, alors il me suffit de le mettre dans un DIV, hiden et de lire un par un et l'inserer ....ça s'est idéal,
Si non on s'en passe (tu vas hurler) en mettant chaque ligne pas dans un div mais dans le javascript !!
et à la main ... faire cette manip...

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
/*====passer de ==========*/
<path d='M 229.07 17.35 C 231.18 18.26 232.36 17.99 231.85 20.85 C 229.21 21.63 229.03 19.60 227.68 17.96 L 229.07 17.35 Z' fill='#687956' />
/* ============a ça====================== */
le[12]="<path d='M 229.07 17.35 C 231.18 18.26 232.36 17.99 231.85 20.85 C 229.21 21.63 229.03 19.60 227.68 17.96 L 229.07 17.35 Z' fill='#687956' />";

et ensuite c'est enfantin avec un timer !! tu comprends... Alors avec mes 6 enfants et 10 petits enfants ,malgré mes 80 ans ce moi ... j'ais intérêt à ce que ça marche !

En tout cas merci de votre patience ! (et avant ce soir un exemple que je fais de ce pas pour vous !!

**javatwister** · 31/12/2019, 18h32

Ah ok, sympa! Bon réveillon alors

**JPBruneau** · 31/12/2019, 18h36

Bon vous pouvez récupérer c'est cadeau !! bien mérité
http://www.fox-infographie.com/svg/svg-test2.php

LIEN MODIFIE

Invité · 31/12/2019, 19h37

Le même avec mon code, et sans "bricolage" (on conserve le code initial du SVG) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
svg#lui {
  margin: auto;
  display: block;
  width: 80%;
  height:800px;
  max-width:900px;
}
svg#lui path { display:none; }

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<svg id="lui">
<path d='M 0.00 0.00 L 209.40 0.00 C 209.10 1.46 208.82 2.96 208.42 4.40 C 205.54 3.14 204.98 3.85 203.70 6.65 C 202.62 12.46 201.33 18.21 200.94 24.04 C 200.53 24.66 200.14 25.29 199.74 25.92 L 198.11 25.95 C 195.64 23.08 193.89 24.88 190.73 24.90 C 190.66 21.87 187.97 23.64 185.90 23.13 C 181.67 20.92 175.95 24.82 173.60 28.37 C 168.84 25.14 161.83 28.03 156.95 29.85 C 159.00 29.81 161.01 29.51 163.05 29.32 C 161.56 31.58 158.44 32.40 156.79 34.83 C 152.51 35.96 150.14 39.81 146.10 41.05 C 142.39 42.33 137.21 47.82 135.61 51.46 C 132.24 50.96 128.62 53.62 126.54 55.86 C 125.58 59.41 128.65 56.05 129.42 59.09 C 121.20 58.98 118.76 66.08 111.02 68.92 C 112.94 75.34 102.18 77.93 98.41 82.40 C 92.01 89.42 84.31 96.24 78.78 103.91 C 78.16 107.44 72.52 109.89 75.35 112.88 C 73.49 117.70 70.66 123.02 67.42 126.89 C 67.15 125.97 66.88 125.06 66.62 124.14 C 64.40 129.14 62.00 133.46 62.08 139.12 C 61.57 147.56 60.73 155.90 57.72 163.87 C 55.34 171.15 51.65 177.61 49.63 185.03 C 48.55 186.91 47.52 188.79 46.81 190.85 C 44.84 196.52 42.71 202.12 40.93 207.85 C 38.11 208.61 39.48 215.12 38.35 217.36 C 37.47 219.43 34.89 223.77 32.19 222.88 C 31.52 218.43 32.69 213.59 33.35 209.16 C 33.60 206.88 36.28 204.43 33.22 203.08 C 30.61 209.99 31.41 216.61 30.55 223.62 C 30.54 225.55 28.82 228.50 31.75 228.76 C 34.29 229.43 30.89 232.45 31.06 234.01 C 30.57 236.78 34.12 234.68 35.35 237.26 C 35.07 241.63 34.75 245.94 35.29 250.32 C 33.61 253.40 30.84 255.08 28.69 257.83 C 24.14 261.75 21.86 266.80 18.72 271.80 C 17.19 273.77 13.07 276.49 13.47 279.19 C 17.74 285.15 16.69 291.47 23.95 295.13 C 26.17 298.05 30.06 299.02 33.02 301.31 C 33.98 302.19 34.95 303.07 35.90 303.96 C 37.09 308.48 40.02 313.27 39.54 317.89 C 40.00 324.44 38.98 333.85 45.14 337.85 C 46.76 340.14 45.74 342.74 48.54 344.46 C 52.02 346.65 48.70 349.89 53.02 350.88 C 52.76 348.82 52.00 346.95 51.32 345.01 C 53.62 345.91 59.88 350.92 61.79 348.88 C 59.55 346.35 56.71 344.85 54.04 342.90 C 51.88 340.32 52.93 336.93 51.06 334.01 C 52.48 330.62 55.72 330.33 57.58 327.49 C 60.37 328.23 61.21 329.79 59.34 332.14 C 61.11 335.34 63.07 338.23 64.30 341.73 C 70.02 337.43 63.24 338.48 64.42 332.88 C 67.72 334.56 69.36 338.87 72.39 341.15 C 71.29 335.36 76.09 338.67 77.54 341.36 C 80.05 343.99 72.81 340.96 75.90 343.20 C 78.37 345.77 81.30 343.17 83.73 346.20 C 86.67 348.22 92.90 355.95 96.38 351.61 L 98.15 352.07 C 98.88 354.24 99.60 355.66 101.33 357.23 C 103.20 361.13 103.48 362.62 108.20 363.36 C 110.42 367.20 113.29 370.56 115.81 374.22 C 120.16 382.90 125.55 391.71 131.84 399.20 C 133.67 403.83 137.82 405.51 137.01 410.99 C 137.83 425.70 140.68 440.18 140.03 455.00 C 139.87 466.02 137.05 476.98 136.97 488.02 C 137.08 492.03 135.02 496.22 133.74 500.00 L 0.00 500.00 L 0.00 0.00 Z' fill='#f5f5f6' />";
<path d='M 209.40 0.00 L 277.81 0.00 C 285.20 4.32 293.25 5.08 301.08 8.90 C 304.52 11.22 294.78 7.32 297.70 10.37 C 301.02 16.78 306.23 7.64 311.15 13.41 C 308.97 13.26 307.13 13.23 305.10 14.18 C 306.79 16.33 311.82 16.54 307.76 19.24 C 297.63 19.48 291.78 13.58 282.48 9.44 C 281.74 8.43 274.68 7.10 278.33 8.76 C 282.37 9.35 275.17 11.89 275.54 9.54 C 274.34 4.84 270.93 10.32 270.03 5.79 C 266.89 3.96 262.93 3.00 259.30 2.92 C 259.33 3.35 261.72 5.94 259.96 4.93 C 248.81 0.80 237.69 1.40 226.51 4.38 C 217.70 8.66 209.34 10.98 203.87 19.86 C 202.68 21.36 202.88 23.47 200.94 24.04 C 201.33 18.21 202.62 12.46 203.70 6.65 C 204.98 3.85 205.54 3.14 208.42 4.40 C 208.82 2.96 209.10 1.46 209.40 0.00 Z' fill='#eeeeee' />";
<path d='M 277.81 0.00 L 500.00 0.00 L 500.00 91.50 C 495.37 91.39 497.08 82.60 494.90 79.16 C 492.22 81.07 487.27 82.39 486.51 85.85 C 486.83 88.25 487.64 88.59 489.71 89.54 C 487.74 93.66 484.58 83.97 480.90 87.66 C 480.84 90.56 480.72 90.53 479.86 93.79 C 481.06 92.85 482.25 91.03 483.88 91.06 C 484.28 92.55 482.68 101.32 481.69 95.60 C 475.91 98.24 472.52 94.34 469.24 90.10 C 466.83 94.16 472.75 96.44 474.37 100.24 C 474.62 102.17 467.98 102.52 469.35 105.59 C 470.42 109.95 468.28 113.28 468.75 117.72 C 465.68 122.42 464.45 112.46 465.23 110.77 C 468.70 110.42 467.07 107.52 467.49 104.99 C 465.25 105.47 458.67 106.24 464.32 108.34 C 461.75 111.63 465.19 115.67 459.53 114.13 C 460.94 121.29 458.79 119.27 453.34 121.05 C 455.41 116.42 456.17 115.68 450.56 116.48 C 450.21 119.66 446.52 120.10 447.11 122.86 C 449.01 122.74 450.82 122.32 452.69 122.01 C 450.51 124.95 450.00 124.53 451.96 127.87 C 450.07 129.28 449.61 129.37 449.47 131.81 C 445.82 133.68 444.38 127.48 447.54 130.32 C 449.06 131.38 446.32 121.78 444.25 126.13 C 442.84 130.07 440.59 128.65 437.20 129.16 C 443.56 133.73 434.51 130.44 432.86 135.04 C 437.94 137.54 440.20 137.90 437.78 144.13 C 440.14 148.79 438.72 149.97 435.92 153.66 C 435.99 157.08 425.73 157.97 432.93 159.47 C 430.18 162.11 425.67 162.83 422.26 164.48 C 428.42 167.91 421.75 164.26 423.21 169.60 C 423.55 171.67 420.31 175.10 424.00 175.00 C 425.82 174.59 428.71 178.48 428.74 175.33 C 432.79 175.60 436.31 174.39 440.15 173.33 C 437.86 176.80 428.28 177.12 426.32 181.72 C 424.83 188.12 430.00 188.45 434.18 190.85 C 434.84 188.59 436.21 187.47 438.05 186.13 C 438.05 188.14 437.39 189.43 436.38 191.08 C 440.06 194.91 445.66 184.42 446.75 190.60 C 443.09 190.95 446.25 192.75 444.20 195.63 C 447.96 194.82 450.17 196.85 452.98 198.96 C 450.16 199.20 447.99 197.31 445.29 197.44 C 444.11 199.79 442.84 201.77 441.21 203.86 C 443.64 207.26 449.33 202.90 450.86 208.83 C 446.21 208.25 441.74 207.50 437.04 208.20 C 438.41 213.40 442.90 217.29 444.69 222.46 C 445.92 225.16 448.58 223.68 450.16 225.86 C 453.66 228.57 447.91 233.11 452.35 235.60 C 456.96 238.98 450.36 239.82 451.00 245.10 C 448.72 240.12 445.21 239.07 442.39 234.83 C 439.97 231.29 434.48 233.20 432.30 229.68 C 429.42 226.23 424.99 224.89 420.94 223.05 C 418.87 218.89 418.83 212.87 418.65 208.20 C 416.49 210.00 414.80 211.86 411.89 212.42 C 407.91 208.97 406.93 199.58 407.46 194.36 C 410.15 188.91 411.31 187.17 409.83 180.89 C 413.09 176.90 405.38 172.76 404.15 168.80 C 402.26 165.19 398.84 161.51 395.05 159.92 C 388.81 153.41 391.21 146.38 386.58 139.07 C 387.30 136.14 389.99 139.21 389.89 135.98 C 389.69 132.00 392.61 129.74 393.01 126.07 C 390.69 128.45 389.80 129.81 388.10 125.91 C 388.09 120.24 388.48 114.81 388.07 109.10 C 387.51 107.48 391.08 108.91 391.90 108.72 C 390.57 106.39 390.04 106.03 390.95 103.36 C 389.17 96.85 387.53 88.05 383.08 82.93 C 379.58 81.25 379.57 75.99 375.97 75.93 C 372.21 67.97 367.03 62.79 359.91 57.84 C 357.47 58.49 354.80 55.36 352.83 54.17 C 349.26 51.65 350.00 47.64 345.61 46.45 C 342.14 45.39 342.02 44.24 340.91 41.07 C 340.31 38.05 337.10 37.03 339.42 34.08 C 338.07 32.25 336.36 30.45 334.21 29.60 C 330.42 28.25 329.46 24.61 325.92 22.56 C 324.30 23.27 322.63 24.52 320.87 24.75 C 319.46 21.28 313.96 20.38 310.68 20.17 C 309.70 19.86 308.73 19.55 307.76 19.24 C 311.82 16.54 306.79 16.33 305.10 14.18 C 307.13 13.23 308.97 13.26 311.15 13.41 C 306.23 7.64 301.02 16.78 297.70 10.37 C 294.78 7.32 304.52 11.22 301.08 8.90 C 293.25 5.08 285.20 4.32 277.81 0.00 Z' fill='#f6f6f7' />";
<!-- ...... -->
</svg>

N.B. J'ai dû "couper" les données (on est limité à 10000 caractères dans le contenu des messages)

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
"use strict";
const lui = document.querySelector('#lui');
const paths = document.querySelectorAll('#lui path');
const lg = paths.length;
const delay = Math.floor(5000/lg); // le dessin complet sera affiché en 5 secondes (quel que soit le nombre de path)
 
for( let i=0; i<lg; i++ )
{
  setTimeout(function(){ 
    paths[i].style.display = 'block';
  }, i*delay); // apparition progressive
}

A voir ici : https://codepen.io/jreaux62/pen/MWYEOBZ

**JPBruneau** · 01/01/2020, 00h51

RESTERA A TRACER (suivre avec une étoile bleue par exemple) le parcours de chaque contour avant de le remplir....) dur dur mais c'était si beau on l'avait écris avec G1DOOT (Gérard Ferandez ) le géant du code de WinPasAPas...
Plus compatible avec Windows 10...

**javatwister** · 01/01/2020, 13h57

Bonjour et bonne année!

Je ne connais pas bien svg et les balises path mais, chose étrange, on ne peut pas "append" chaque path comme noeud dom alors que la collection getElementsByTagName est reconnue, ou querySelectorAll comme l'a proposé jreaux62;

Bref, le seul moyen de transférer la liste de paths de limages vers lui est innerHTML

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<svg  id='lui' name='lui' class='lui' > 
 
</svg>
 
 
<hr />
<div id="limage">
<path d='M 270.07 379.98 C 266.00 383.53 264.86 388.38 261.39 392.33 C 257.80 393.88 254.90 395.62 250.86 395.43 C 249.03 397.91 247.44 400.06 244.42 401.20 C 242.83 400.66 241.85 400.66 240.23 401.00 C 238.17 400.76 236.13 400.46 234.05 400.45 C 228.17 397.12 228.20 396.80 227.61 389.96 C 224.50 393.23 230.51 400.12 223.23 396.67 C 225.43 391.81 220.67 390.60 221.95 384.87 C 227.42 384.70 232.35 383.32 237.86 383.88 C 243.39 383.80 247.06 380.44 252.20 383.94 C 255.18 386.30 256.05 379.92 257.67 384.45 C 262.27 388.86 265.04 378.94 270.07 379.98 Z' fill='#da8686' />;
<path d='M 213.01 382.94 C 206.18 382.64 204.25 385.16 204.37 391.95 C 209.11 388.17 205.41 393.99 208.89 394.91 C 209.56 393.65 209.38 392.40 209.49 391.02 C 210.99 392.64 211.75 397.31 212.29 392.19 C 213.59 395.63 213.90 394.29 216.96 393.68 C 216.11 392.48 213.70 392.85 214.26 391.13 C 217.64 390.41 217.43 393.12 219.11 395.18 C 222.11 393.42 219.54 387.97 221.02 384.93 L 221.95 384.87 C 220.67 390.60 225.43 391.81 223.23 396.67 C 230.51 400.12 224.50 393.23 227.61 389.96 C 228.20 396.80 228.17 397.12 234.05 400.45 C 230.28 405.37 222.61 402.89 217.02 402.67 C 212.78 401.50 208.50 401.09 204.14 400.80 C 203.77 400.00 203.40 399.21 203.02 398.41 C 205.00 397.57 205.61 396.64 204.14 394.84 C 201.19 391.54 200.01 386.49 196.28 384.17 C 200.18 384.15 211.49 378.25 213.01 382.94 Z' fill='#c66064' />;
<path d='M 213.01 382.94 C 215.62 383.81 218.12 383.49 220.78 383.18 L 221.21 383.90 L 221.02 384.93 C 219.54 387.97 222.11 393.42 219.11 395.18 C 217.43 393.12 217.64 390.41 214.26 391.13 C 213.70 392.85 216.11 392.48 216.96 393.68 C 213.90 394.29 213.59 395.63 212.29 392.19 C 211.75 397.31 210.99 392.64 209.49 391.02 C 209.38 392.40 209.56 393.65 208.89 394.91 C 205.41 393.99 209.11 388.17 204.37 391.95 C 204.25 385.16 206.18 382.64 213.01 382.94 Z' fill='#dc8188' />;
<path d='M 247.15 388.34 C 249.72 389.14 252.15 389.86 254.82 390.29 C 255.13 394.81 250.37 393.65 247.36 393.90 C 246.07 398.26 238.56 397.15 235.72 395.46 C 238.70 394.12 240.20 394.79 239.98 390.67 C 242.88 390.51 244.68 389.74 247.15 388.34 Z' fill='#e09ea3' />;
<path d='M 239.98 390.67 C 240.20 394.79 238.70 394.12 235.72 395.46 C 233.29 396.32 234.50 392.40 233.61 390.94 C 235.08 389.70 238.18 390.60 239.98 390.67 Z' fill='#eacac8' />;
<path d='M 240.23 401.00 C 239.75 403.70 236.66 402.63 234.64 403.30 C 233.16 406.35 235.99 409.28 231.67 410.13 C 228.16 408.87 228.43 412.60 225.21 411.96 C 224.25 412.06 223.22 407.76 223.09 410.03 C 223.32 413.99 219.08 409.01 217.52 408.52 C 216.14 411.12 212.36 412.92 212.99 415.97 C 212.27 419.26 215.85 416.86 217.63 417.04 C 214.96 420.54 215.60 422.51 215.94 426.74 C 213.57 426.63 212.22 424.42 210.92 427.46 C 210.11 429.89 208.63 427.64 206.99 427.33 C 206.14 431.93 209.15 432.29 211.63 435.19 C 210.42 438.44 211.30 442.14 206.87 439.36 C 207.67 442.74 211.51 445.59 213.78 448.17 C 217.31 449.84 222.65 449.64 226.60 449.54 C 225.17 454.42 235.60 452.76 238.00 452.13 C 241.07 453.47 249.74 448.64 250.37 452.00 C 247.68 453.65 244.97 454.04 241.87 454.16 C 238.63 454.38 235.51 455.49 232.26 455.87 C 224.98 452.57 213.33 456.72 207.74 449.53 C 201.21 447.83 202.93 447.32 200.96 441.97 C 195.52 438.00 201.25 434.99 196.73 431.55 C 197.08 430.13 197.69 428.77 198.13 427.37 C 194.94 431.33 194.79 421.59 192.84 419.80 C 194.86 417.18 188.52 417.64 192.95 417.01 C 197.83 416.76 193.28 410.54 191.29 409.05 C 195.06 407.84 197.98 405.90 201.90 407.81 C 198.77 403.62 202.80 404.43 205.82 403.50 C 208.06 399.82 213.57 406.07 217.02 402.67 C 222.61 402.89 230.28 405.37 234.05 400.45 C 236.13 400.46 238.17 400.76 240.23 401.00 Z' fill='#cf8d74' />;
<path d='M 244.42 401.20 C 242.06 404.19 240.70 404.53 241.98 408.62 C 239.86 405.29 231.95 410.28 238.68 409.56 C 237.97 413.36 238.97 416.32 239.95 419.94 C 236.78 424.79 232.55 420.57 229.53 425.03 C 231.25 427.87 230.85 427.95 229.39 430.71 C 231.01 430.76 232.13 429.94 232.93 431.86 C 231.34 432.38 229.68 432.48 228.11 433.05 C 230.19 435.40 231.77 436.60 231.34 440.05 C 230.75 441.89 234.22 438.13 233.67 439.96 C 233.80 443.71 234.15 450.07 239.65 448.75 C 245.69 446.74 252.70 451.58 256.59 444.22 C 258.25 445.45 257.81 447.09 258.13 448.94 C 255.25 449.35 252.92 450.74 250.37 452.00 C 249.74 448.64 241.07 453.47 238.00 452.13 C 235.60 452.76 225.17 454.42 226.60 449.54 C 222.65 449.64 217.31 449.84 213.78 448.17 C 211.51 445.59 207.67 442.74 206.87 439.36 C 211.30 442.14 210.42 438.44 211.63 435.19 C 209.15 432.29 206.14 431.93 206.99 427.33 C 208.63 427.64 210.11 429.89 210.92 427.46 C 212.22 424.42 213.57 426.63 215.94 426.74 C 215.60 422.51 214.96 420.54 217.63 417.04 C 215.85 416.86 212.27 419.26 212.99 415.97 C 212.36 412.92 216.14 411.12 217.52 408.52 C 219.08 409.01 223.32 413.99 223.09 410.03 C 223.22 407.76 224.25 412.06 225.21 411.96 C 228.43 412.60 228.16 408.87 231.67 410.13 C 235.99 409.28 233.16 406.35 234.64 403.30 C 236.66 402.63 239.75 403.70 240.23 401.00 C 241.85 400.66 242.83 400.66 244.42 401.20 Z' fill='#dc9b83' />;
<path d='M 317.53 409.21 C 319.12 417.82 319.14 428.09 317.94 436.71 C 318.61 436.24 319.28 435.78 319.95 435.31 C 319.93 438.67 318.63 443.01 321.74 445.36 C 324.07 452.19 326.10 459.19 328.60 465.93 C 325.50 467.90 327.87 471.41 324.40 472.12 C 325.46 467.57 325.96 466.00 323.80 461.68 C 323.35 460.74 324.81 457.16 322.93 459.07 C 320.67 460.67 319.91 455.47 319.71 454.19 C 318.98 455.47 318.29 456.76 317.48 458.00 C 317.38 455.39 317.97 455.17 315.41 454.17 C 315.31 451.85 315.76 449.65 316.74 447.55 C 313.60 447.73 316.22 446.44 316.73 444.93 C 313.31 441.04 314.61 434.10 314.86 429.29 C 312.76 430.46 308.21 431.05 310.24 434.34 C 310.52 438.10 309.18 436.00 307.03 435.34 C 308.32 438.74 305.62 443.46 309.74 444.36 C 311.31 447.37 306.61 449.62 305.05 451.80 C 305.27 450.21 305.58 448.65 305.76 447.06 C 303.39 447.03 303.96 451.53 302.20 453.05 C 302.21 451.30 302.35 449.55 302.43 447.80 C 300.02 449.20 295.96 458.69 301.92 454.09 C 302.11 457.24 298.91 460.58 296.69 462.55 C 296.22 467.12 300.48 469.40 299.65 473.96 C 299.00 475.58 297.77 476.97 296.92 478.50 C 298.26 478.40 299.59 478.26 300.93 478.17 C 299.89 479.79 293.28 482.35 297.56 483.90 C 297.95 485.24 300.50 490.40 297.20 487.85 C 294.14 486.35 296.20 489.94 296.63 491.14 C 293.09 490.87 293.59 487.04 290.22 486.16 C 289.11 488.63 288.50 491.67 285.98 493.13 C 283.83 491.72 284.98 488.83 282.30 487.11 C 281.64 492.02 282.33 490.63 278.57 489.05 C 279.20 493.15 277.23 491.37 274.33 492.40 C 272.25 494.00 271.46 497.63 270.53 500.00 L 233.90 500.00 C 235.41 495.70 234.17 491.93 234.37 487.49 C 240.59 488.84 235.07 479.06 232.52 478.48 C 233.22 475.31 234.90 472.91 236.68 470.29 C 234.17 469.22 229.59 470.25 230.37 466.34 C 226.31 467.11 228.57 464.98 229.00 462.53 C 231.73 464.79 234.37 461.11 236.41 459.50 C 232.98 455.96 241.48 460.18 237.30 456.08 C 239.84 455.53 249.11 457.07 241.87 454.16 C 244.97 454.04 247.68 453.65 250.37 452.00 C 252.92 450.74 255.25 449.35 258.13 448.94 C 260.88 448.82 269.89 444.95 263.04 442.99 C 264.41 438.77 267.70 435.74 271.68 434.07 C 275.11 434.28 276.77 432.59 279.25 430.55 C 280.59 430.66 282.53 432.91 281.72 430.14 C 279.91 426.38 286.87 427.43 285.15 424.79 C 282.87 422.38 290.26 421.90 285.05 421.36 C 286.03 416.74 288.64 415.97 291.97 415.18 C 294.77 419.99 294.93 409.70 297.16 414.82 C 298.23 419.80 300.88 416.28 304.02 418.90 C 301.85 421.99 298.61 422.71 297.96 426.85 C 305.52 422.70 311.04 414.76 317.53 409.21 Z' fill='#ddb7a2' />;
<path d='M 139.22 413.14 C 141.47 414.92 143.88 416.64 145.82 418.76 C 143.27 424.01 144.38 422.78 148.69 425.38 C 146.22 427.18 143.69 427.64 143.19 431.13 C 142.01 434.19 144.66 431.47 145.97 431.29 C 147.33 435.01 149.43 438.35 147.07 442.06 C 148.04 445.57 151.35 447.67 150.91 452.02 C 149.32 450.76 149.08 448.58 147.19 447.98 C 147.82 451.70 149.98 456.28 145.40 458.18 C 150.36 461.79 146.49 465.56 145.67 470.24 C 145.12 472.07 148.24 475.41 145.39 475.83 C 144.51 479.03 147.54 482.27 143.31 483.28 C 143.84 486.15 145.14 488.97 145.89 491.81 C 144.61 490.95 143.42 490.03 142.11 489.22 C 141.12 491.39 141.55 492.67 142.20 494.78 C 140.31 496.67 140.68 497.44 140.77 500.00 L 137.12 500.00 C 138.40 491.35 138.85 482.48 141.10 474.03 C 142.15 460.99 143.30 446.46 140.52 433.74 C 142.72 426.33 139.81 420.78 139.22 413.14 Z' fill='#a8856d' />;
<path d='M 145.82 418.76 C 150.96 424.42 157.96 428.95 164.07 433.56 C 170.28 437.50 176.50 441.77 183.11 444.93 C 185.69 447.72 187.06 448.57 190.90 449.12 C 191.82 449.83 192.75 450.52 193.70 451.18 C 190.49 454.99 193.20 458.27 190.51 462.38 C 189.89 465.04 189.21 467.99 187.70 463.58 C 185.59 464.65 183.81 466.44 181.31 465.41 C 178.13 463.67 173.72 465.76 170.42 466.63 C 170.68 470.39 170.14 468.33 167.93 467.30 C 166.22 470.46 170.69 472.90 167.70 476.68 C 165.15 479.33 164.37 478.77 162.33 476.14 C 163.04 479.94 160.72 482.58 162.70 486.21 C 163.20 488.34 163.56 486.95 164.88 486.52 C 166.27 489.79 171.27 492.51 167.98 495.98 C 170.02 498.97 172.50 498.31 167.54 500.00 L 140.77 500.00 C 140.68 497.44 140.31 496.67 142.20 494.78 C 141.55 492.67 141.12 491.39 142.11 489.22 C 143.42 490.03 144.61 490.95 145.89 491.81 C 145.14 488.97 143.84 486.15 143.31 483.28 C 147.54 482.27 144.51 479.03 145.39 475.83 C 148.24 475.41 145.12 472.07 145.67 470.24 C 146.49 465.56 150.36 461.79 145.40 458.18 C 149.98 456.28 147.82 451.70 147.19 447.98 C 149.08 448.58 149.32 450.76 150.91 452.02 C 151.35 447.67 148.04 445.57 147.07 442.06 C 149.43 438.35 147.33 435.01 145.97 431.29 C 144.66 431.47 142.01 434.19 143.19 431.13 C 143.69 427.64 146.22 427.18 148.69 425.38 C 144.38 422.78 143.27 424.01 145.82 418.76 Z' fill='#a0775f' />;
<path d='M 169.33 428.58 C 172.25 433.05 174.87 429.99 175.97 436.18 C 182.31 439.29 185.83 444.45 190.90 449.12 C 187.06 448.57 185.69 447.72 183.11 444.93 C 176.50 441.77 170.28 437.50 164.07 433.56 C 164.29 431.97 163.63 430.68 163.13 429.22 C 165.23 428.92 167.69 426.32 169.33 428.58 Z' fill='#b39078' />;
<path d='M 314.86 429.29 C 314.61 434.10 313.31 441.04 316.73 444.93 C 316.22 446.44 313.60 447.73 316.74 447.55 C 315.76 449.65 315.31 451.85 315.41 454.17 C 317.97 455.17 317.38 455.39 317.48 458.00 C 318.29 456.76 318.98 455.47 319.71 454.19 C 319.91 455.47 320.67 460.67 322.93 459.07 C 324.81 457.16 323.35 460.74 323.80 461.68 C 325.96 466.00 325.46 467.57 324.40 472.12 C 327.87 471.41 325.50 467.90 328.60 465.93 C 330.91 468.49 329.95 476.44 333.90 476.17 C 338.08 485.79 342.80 494.50 352.16 500.00 L 270.53 500.00 C 271.46 497.63 272.25 494.00 274.33 492.40 C 277.23 491.37 279.20 493.15 278.57 489.05 C 282.33 490.63 281.64 492.02 282.30 487.11 C 284.98 488.83 283.83 491.72 285.98 493.13 C 288.50 491.67 289.11 488.63 290.22 486.16 C 293.59 487.04 293.09 490.87 296.63 491.14 C 296.20 489.94 294.14 486.35 297.20 487.85 C 300.50 490.40 297.95 485.24 297.56 483.90 C 293.28 482.35 299.89 479.79 300.93 478.17 C 299.59 478.26 298.26 478.40 296.92 478.50 C 297.77 476.97 299.00 475.58 299.65 473.96 C 300.48 469.40 296.22 467.12 296.69 462.55 C 298.91 460.58 302.11 457.24 301.92 454.09 C 295.96 458.69 300.02 449.20 302.43 447.80 C 302.35 449.55 302.21 451.30 302.20 453.05 C 303.96 451.53 303.39 447.03 305.76 447.06 C 305.58 448.65 305.27 450.21 305.05 451.80 C 306.61 449.62 311.31 447.37 309.74 444.36 C 305.62 443.46 308.32 438.74 307.03 435.34 C 309.18 436.00 310.52 438.10 310.24 434.34 C 308.21 431.05 312.76 430.46 314.86 429.29 Z' fill='#daae97' />;
<path d='M 190.90 449.12 C 193.48 449.00 194.86 449.53 196.99 450.83 C 198.96 451.97 200.95 453.01 203.02 453.97 C 204.03 455.15 207.91 457.31 204.29 457.76 C 199.92 459.52 202.70 463.28 201.38 466.23 C 196.78 465.20 197.82 471.73 198.79 474.38 C 195.23 474.69 198.01 475.23 199.33 476.36 C 196.61 480.43 198.33 481.49 201.09 484.51 C 195.76 483.46 199.82 485.43 200.80 487.87 C 197.33 491.30 202.01 491.14 201.58 495.40 C 205.00 497.47 206.18 497.51 202.30 500.00 L 174.74 500.00 C 173.77 496.12 175.25 496.62 177.16 494.08 C 178.46 492.09 178.65 488.37 176.32 487.00 C 175.89 487.94 176.45 492.07 175.07 491.80 C 174.93 489.71 174.91 487.60 175.08 485.51 C 180.33 486.15 181.48 486.69 184.07 481.67 C 186.56 482.66 189.07 481.22 191.81 481.29 C 193.61 477.32 193.45 471.54 192.57 467.31 C 194.44 464.90 197.04 464.33 194.56 461.09 C 199.99 457.98 194.54 454.93 200.89 454.67 C 198.47 453.55 196.06 452.43 193.70 451.18 C 192.75 450.52 191.82 449.83 190.90 449.12 Z' fill='#b68771' />;
<path d='M 193.70 451.18 C 196.06 452.43 198.47 453.55 200.89 454.67 C 194.54 454.93 199.99 457.98 194.56 461.09 C 197.04 464.33 194.44 464.90 192.57 467.31 C 193.45 471.54 193.61 477.32 191.81 481.29 C 189.07 481.22 186.56 482.66 184.07 481.67 C 181.48 486.69 180.33 486.15 175.08 485.51 C 174.91 487.60 174.93 489.71 175.07 491.80 C 176.45 492.07 175.89 487.94 176.32 487.00 C 178.65 488.37 178.46 492.09 177.16 494.08 C 175.25 496.62 173.77 496.12 174.74 500.00 L 167.54 500.00 C 172.50 498.31 170.02 498.97 167.98 495.98 C 171.27 492.51 166.27 489.79 164.88 486.52 C 163.56 486.95 163.20 488.34 162.70 486.21 C 160.72 482.58 163.04 479.94 162.33 476.14 C 164.37 478.77 165.15 479.33 167.70 476.68 C 170.69 472.90 166.22 470.46 167.93 467.30 C 170.14 468.33 170.68 470.39 170.42 466.63 C 173.72 465.76 178.13 463.67 181.31 465.41 C 183.81 466.44 185.59 464.65 187.70 463.58 C 189.21 467.99 189.89 465.04 190.51 462.38 C 193.20 458.27 190.49 454.99 193.70 451.18 Z' fill='#ac7e67' />;
<path d='M 203.02 453.97 C 206.71 454.46 210.40 454.97 214.08 455.55 C 211.28 458.46 210.94 459.55 206.94 461.06 C 204.02 466.43 208.65 463.54 211.67 465.27 C 211.84 468.79 210.46 471.58 212.63 474.81 C 204.71 472.11 213.26 480.61 216.78 478.05 C 214.46 480.39 212.68 481.11 215.93 483.88 C 221.58 479.28 216.73 487.64 216.47 490.15 C 217.07 493.44 218.87 496.74 219.84 500.00 L 202.30 500.00 C 206.18 497.51 205.00 497.47 201.58 495.40 C 202.01 491.14 197.33 491.30 200.80 487.87 C 199.82 485.43 195.76 483.46 201.09 484.51 C 198.33 481.49 196.61 480.43 199.33 476.36 C 198.01 475.23 195.23 474.69 198.79 474.38 C 197.82 471.73 196.78 465.20 201.38 466.23 C 202.70 463.28 199.92 459.52 204.29 457.76 C 207.91 457.31 204.03 455.15 203.02 453.97 Z' fill='#c09580' />;
<path d='M 241.87 454.16 C 249.11 457.07 239.84 455.53 237.30 456.08 C 241.48 460.18 232.98 455.96 236.41 459.50 C 234.37 461.11 231.73 464.79 229.00 462.53 C 228.57 464.98 226.31 467.11 230.37 466.34 C 229.59 470.25 234.17 469.22 236.68 470.29 C 234.90 472.91 233.22 475.31 232.52 478.48 C 235.07 479.06 240.59 488.84 234.37 487.49 C 234.17 491.93 235.41 495.70 233.90 500.00 L 224.83 500.00 C 219.96 494.87 228.23 499.96 227.68 494.24 C 228.77 492.81 224.04 490.13 225.86 490.32 C 229.75 491.90 228.39 484.92 224.49 486.71 C 227.84 482.40 217.96 477.15 223.68 474.66 C 222.66 470.86 214.12 466.82 216.57 461.44 C 217.47 459.48 217.24 458.98 216.43 457.06 C 221.34 456.76 225.75 457.58 230.29 456.27 L 232.26 455.87 C 235.51 455.49 238.63 454.38 241.87 454.16 Z' fill='#d2ad99' />;
<path d='M 214.08 455.55 C 219.46 456.37 224.85 455.76 230.29 456.27 C 225.75 457.58 221.34 456.76 216.43 457.06 C 217.24 458.98 217.47 459.48 216.57 461.44 C 214.12 466.82 222.66 470.86 223.68 474.66 C 217.96 477.15 227.84 482.40 224.49 486.71 C 228.39 484.92 229.75 491.90 225.86 490.32 C 224.04 490.13 228.77 492.81 227.68 494.24 C 228.23 499.96 219.96 494.87 224.83 500.00 L 219.84 500.00 C 218.87 496.74 217.07 493.44 216.47 490.15 C 216.73 487.64 221.58 479.28 215.93 483.88 C 212.68 481.11 214.46 480.39 216.78 478.05 C 213.26 480.61 204.71 472.11 212.63 474.81 C 210.46 471.58 211.84 468.79 211.67 465.27 C 208.65 463.54 204.02 466.43 206.94 461.06 C 210.94 459.55 211.28 458.46 214.08 455.55 Z' fill='#c8a18d' />
</div>
 
<script>
const lui = document.getElementById('lui');
const paths = document.getElementById('limage').getElementsByTagName("path");
let i=0;
setInterval(()=>{if(i<paths.length){
lui.innerHTML+=paths[i].innerHTML;i++}}, 200);
</script>

Invité · 01/01/2020, 14h36

@javatwister
LOL ! Tu as plusieurs ~~trains~~ messages de retard !

J'y ai déjà répondu dans mon message #24 !

Envoyé par jreaux62

[EDIT] J'ai trouvé !

Il faut remplacer <div id="limage">....</div> par <svg id="limage">....</svg> !
Et là, les <path ... /> sont bien TOUS trouvés !

Mais c'est vrai que ça date de l'année dernière...

**javatwister** · 01/01/2020, 14h59

Oui mais, si tu regardes mon code, le problème est ailleurs.

Invité · 01/01/2020, 15h55

Non,
C'est exactement CE problème.

D'après ce que j'en déduis, <path> n'est pas "reconnu" comme un "enfant naturel" de <div>. Du coup, ça "coince" au niveau du DOM.
Par contre, il l'est bien pour <svg>.

Remplace <div id="limage"> par <svg id="limage">, et ce code devrait fonctionner * :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
const lui = document.getElementById('lui');
const paths = document.getElementById('limage').getElementsByTagName("path");
let i=0;
setInterval(()=>{
	if(i<paths.length){
	  lui.append(paths[i].cloneNode());
	  i++
	}
}, 100);

* Il est important ici d'utiliser .cloneNode() pour copier les noeuds (sinon, certains <path> semblent être... oubliés lors de leur "transfert"...).

Sinon, il est préférable d'utiliser une de mes autres solutions (avec un seul <svg>).

**javatwister** · 01/01/2020, 16h10

Je suis d'accord (en gros) et j'ai joué avec append et cloneNode aussi. C'est juste la nature de 'path' qui m'étonne. L'attribut "d" semble correspondre à "innerHTML" alors que logiquement innerHTML est vide pour l'élément. Bref...

**JPBruneau** · 01/01/2020, 17h17

non non mon Ami, "d" c'est la définition du tracé à parcourir https://developer.mozilla.org/fr/doc...VG/Attribute/d
Dites les Amis le 01/01/2020 vous bossez pour le plaisir comme moi !

Extraction séquentielle de chaines de caractères d'un div

JavaScript

Discussions similaires

Partager

Partager