<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 SVG 相机交互式拍照动画</title>
<style>
html,
body {
height: 100%;
margin: 0;
}
body {
background-color: #86cce5;
overflow: hidden;
}
svg {
width: 100%;
height: 100%;
}
#blink {
pointer-events: none;
}
#power,
#camera--switch {
cursor: pointer;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" preserveAspectRatio='xMidYMin meet'>
<defs>
</clipPath>
<clipPath id="camera--screen">
<path fill="#86CCE5" d="M504.5 743c0 4.9-4 8.9-8.9 8.9H300.5c-4.9 0-8.9-4-8.9-8.9V618.3c0-4.9 4-8.9 8.9-8.9h195.1c4.9 0 8.9 4 8.9 8.9V743z" />
</clipPath>
</defs>
<rect id='rect' fill='none' x='0' y='235' width='800' height='885' />
<g id="landscape">
<path fill="#86CCE5" d="M0 0h800v800H0z" />
<path fill="#194A44" d="M0 527.2l158-86.3-23.5-95.7-9.2 21.3-15.9-50.4-12.8 47-7.1-23.1-10.8 27.6-13.5-32.9-6.8 24.4L48 328.3l-11.6 31.2-8.7-45.2-12.2 49.4-5.4-20-7.3 30.6L0 360z" />
<path fill="#194A44" d="M662.8 336.9L678 294l5.9 18.4 3.2-9.5s6.8 30.5 6.8 30c.1-.5 11.6-38.9 11.6-38.9l9.2 38.2L725 321l6.6 20.9 7-9.7 1.6 6.8 3.4-7.6 11.8 31.9 8.9-36.9 12.4 48.3 5.5-15.8 7.4 29.9 7.4-29.7 3.3 18.3V346l-15.5-57.4-13.1 41-7.4-27.7-11.3 22.3-13.8-41.4-7 21.3-10.7-37.4-11.9 25.5-8.9-51.3-12.5 43.9-5.5-23.6-7.5 27.3-7.4-41.4-12.8 69 .5-1.5 7.3 22.3z"
/>
<path fill="#194A44" d="M639.8 397.7l-2.7 14.6h20.1z" />
<path fill="#2B877C" d="M800 412.3v-34.8l-3.3-18.3-7.4 29.7-7.4-29.9-5.5 15.8-12.4-48.3-8.8 36.9-11.8-31.9-3.4 7.5 10.1 44.1-87-8.9 20.7-61.7L678 294l-15.2 42.9-7.3-22.3-.5 1.5-23.5 74.7 8.3 6.9 17.4 14.6z" />
<path fill="#194A44" d="M525.7 295.3l13.6 57.7 10.9-28.3 7.3 17.8 13-46.4 16.2 38.8 7.7-18.5-20.8-76.3-8.1 30.8-8.2-20.3-6 17.5-13.6-32.6-9.8 38.1-12.9-19-8.7 20.9c4.5 16 14.2 50.1 14.2 50.7 0 1 5.2-30.9 5.2-30.9z" />
<path fill="#194A44" d="M458.1 334.1l10.1-27.5 15.8 17.2 16.5-46.7-6.8-13.3-13 33.7-12.1-16.6-8 20.6-14.3-30.4-17.8 45-10.3-12.5-26.3 82.7h41.2l14.2-62.5z" />
<path fill="#143D39" d="M454.8 357.4l7.4 29.7 7.4-29.9L475 373l12.4-48.3 8.9 36.9 11.8-31.9 10.6 23.5 6.9-24.2 13.7 24.3.1-.2-13.6-57.7s-5.1 31.9-5.2 31.1c-.1-.6-9.7-34.7-14.2-50.7-1.4-4.9-2.3-8.1-2.3-8.1l-3.4 9.6-16.7 46.5-15.8-17.2-10.1 27.5-10.8-10.3-14.3 62.5-3.6 15.8 17.5-1.3 7.9-43.4z"
/>
<path fill="#143D39" d="M731.4 341.9l-6.6-20.9-10.3 11.2-9.2-38.2s-11.5 38.3-11.6 38.9c-.1.5-6.8-30-6.8-30l-3.2 9.5-20.7 61.7 87 8.9-10-44-1.6-6.8-7 9.7z" />
<path fill="#2B877C" d="M619.9 389L596 312.8l-1.6 3.8-7.7 18.5-16.2-38.9-13 46.4-7.3-17.8-10.9 28.2-.1.3-13.7-24.3-6.9 24.2-10.6-23.5-11.7 31.9-8.9-36.9L475 373l-5.5-15.8-7.4 29.9-7.3-29.7-7.9 43.3-2.1 11.6h147.3z" />
<radialGradient id="sun_1_" cx="426.918" cy="203.306" r="153.798" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFD95A" />
<stop offset="1" stop-color="#FFD95A" stop-opacity="0" />
</radialGradient>
<circle class="sun" opacity=".8" fill="url(#sun_1_)" cx="426.9" cy="203.3" r="153.8" />
<circle fill="#FFD95A" cx="426.9" cy="203.3" r="57.4" />
<g id="add-all">
<path id="add4" fill="#194A44" d="M1 527.2l-158-86.3 23.5-95.7 9.2 21.3 15.9-50.4 12.8 47 7.1-23.1 10.8 27.6 13.5-32.9 6.8 24.4 10.4-30.8 11.6 31.2 8.7-45.2 12.2 49.4 5.4-20 7.3 30.6L1 360z" />
<path id="add4_6_" fill="#194A44" d="M-337.8 648.8l-158.1-86.4 23.5-95.6 9.2 21.3 15.9-50.4 12.8 47 7.2-23.1 10.8 27.6 13.4-33 6.9 24.5 10.4-30.8 11.5 31.2 8.7-45.2 12.2 49.4 5.4-20 7.3 30.6 2.9-14.3z" />
<path id="add4_4_" fill="#194A44" d="M-244.3 583.7l-158.1-86.3 23.6-95.7 9.1 21.3 15.9-50.4 12.8 47 7.2-23.1 10.8 27.7 13.4-33 6.9 24.5 10.4-30.8 11.5 31.2 8.8-45.3 12.1 49.4 5.4-20 7.3 30.6 2.9-14.3z" />
<path id="add4_1_" fill="#194A44" d="M-122 533.7l-158-86.3 23.5-95.6 9.2 21.3 15.9-50.4 12.8 46.9 7.1-23.1 10.8 27.7 13.5-33 6.8 24.5 10.4-30.8 11.6 31.2 8.7-45.2 12.2 49.4 5.4-20 7.3 30.6 2.8-14.3z" />
<path id="add3" fill="#258178" d="M6.7 426.2s-64.8-68.9-116.2-69.1C-252.4 356.5-840.4 800-840.4 800H6.7V426.2z" />
<g id="add2">
<path fill="#194A44" d="M932.2 347.9L917 305l-5.9 18.4-3.1-9.4s-6.8 30.5-6.8 30c-.1-.5-11.6-38.9-11.6-38.9l-9.2 38.2-10.3-11.3-6.6 20.9-7-9.7-1.5 6.8-3.4-7.6-11.8 31.9-8.9-36.9-12.4 48.3-5.5-15.8-7.4 29.9-7.4-29.7-3.3 18.3V357l15.5-57.4 13.1 41 7.4-27.7 11.1 22.3 13.8-41.4 7 21.3 10.7-37.4 11.9 25.5 8.9-51.3 12.5 43.9 5.5-23.6 7.5 27.3 7.4-41.4 12.8 69-.5-1.5-7.3 22.3z"
/>
<path fill="#194A44" d="M955.2 407.7l2.7 14.6h-20.1z" />
<path fill="#2B877C" d="M795 422.3v-34.8l3.3-18.3 7.4 29.7 7.4-29.9 5.5 15.8 12.4-48.3 8.8 36.9 11.8-31.9 3.4 7.5-10.1 44.1 87-8.9-20.7-61.7L917 304l15.2 42.9 7.3-22.3.5 1.5 23.5 74.7-8.3 6.9-17.4 14.6z" />
<path fill="#194A44" d="M1001.3 318.3L987.7 376l-10.9-28.3-7.3 17.8-13-46.4-16.2 38.8-7.7-18.5 20.8-76.3 8.1 30.8 8.2-20.3 6 17.5 13.6-32.6 9.8 38.1 12.9-19 8.7 20.9c-4.5 16-14.2 50.1-14.2 50.7 0 1-5.2-30.9-5.2-30.9z" />
<path fill="#194A44" d="M1069.3 305.3l-13.6 57.7-10.9-28.3-7.3 17.8-13-46.4-16.2 38.8-7.7-18.5 20.8-76.3 8.1 30.8 8.2-20.3 6 17.5 13.6-32.6 9.8 38.1 12.9-19 8.7 20.9c-4.5 16-14.2 50.1-14.2 50.7 0 1-5.2-30.9-5.2-30.9z" />
<path fill="#194A44" d="M1136.9 367.1l-10.1-27.5-15.8 17.2-16.5-46.7 6.8-13.3 13 33.7 12.1-16.6 8 20.6 14.3-30.4 17.8 45 10.3-12.5 26.3 82.7h-41.2l-14.2-62.5z" />
<path fill="#143D39" d="M1140.2 367.4l-7.4 29.7-7.4-29.9-5.4 15.8-12.4-48.3-8.9 36.9-11.8-31.9-10.6 23.5-6.9-24.2-13.7 24.3-.1-.2 13.6-57.7s5.1 31.9 5.2 31.1c.1-.6 9.7-34.7 14.2-50.7 1.4-4.9 2.3-8.1 2.3-8.1l3.4 9.6 16.6 46.6 15.8-17.2 10.1 27.5 10.8-10.3 14.3 62.5 3.6 15.8-17.5-1.3-7.8-43.5z"
/>
<path fill="#143D39" d="M863.6 351.9l6.6-20.9 10.3 11.2 9.2-38.2s11.5 38.3 11.6 38.9c.1.5 6.8-30 6.8-30l3.2 9.5 20.7 61.7-87 8.9 10-44 1.6-6.8 7 9.7z" />
<path fill="#2B877C" d="M934.1 378l23.9-76.2 1.6 3.8 7.7 18.5 16.2-38.9 13 46.4 7.3-17.8 10.9 28.2.1.3 13.7-24.3 6.9 24.2 10.6-23.5 11.7 31.9 8.9-36.9L1079 362l5.5-15.8 7.4 29.9 7.3-29.7 7.9 43.3 2.1 11.6H961.9z" />
<path fill="#2B877C" d="M975.1 399l23.9-76.2 1.6 3.8 7.7 18.5 16.2-38.9 13 46.4 7.3-17.8 10.9 28.2.1.3 13.7-24.3 6.9 24.2 10.6-23.5 11.7 31.9 8.9-36.9L1120 383l5.5-15.8 7.4 29.9 7.3-29.7 7.9 43.3 2.1 11.6h-147.3z" />
</g>
<path id="add1" fill="#47A97C" d="M790.7 418.2s49.9-70.6 176.3-70.6c274-.2 797 452.4 797 452.4H790.7V418.2z" />
<path fill="#47A97C" d="M-87.1 432.7s-3.6-11.7-16-12c-12.5-.3-13.6 16.4-13.6 16.4s-4.7-6.4-10.1-3.5c-5.4 2.9-8.4 11.4-8.4 11.4s-8.2-5.9-14.4 5h97s-7.7-12.6-19.5-6.7c.1 0-2.2-11.4-15-10.6z" />
<path fill="#47A97C" d="M-77.7 598.9s-3.6-11.7-16-12c-12.5-.3-13.6 16.4-13.6 16.4s-4.7-6.4-10.1-3.5c-5.4 2.9-8.4 11.4-8.4 11.4s-8.2-5.9-14.4 5h97s-7.7-12.6-19.5-6.7c0 0-2.3-11.4-15-10.6z" />
<path fill="#47A97C" d="M-497.4 721.1s-3.6-11.7-16-12c-12.5-.3-13.6 16.4-13.6 16.4s-4.7-6.4-10.1-3.5c-5.4 2.9-8.4 11.4-8.4 11.4s-8.2-5.9-14.4 5h97s-7.7-12.6-19.5-6.7c.1-.1-2.2-11.5-15-10.6z" />
<path fill="#47A97C" d="M-266.1 699.6s-3.6-11.7-16-12c-12.5-.3-13.6 16.4-13.6 16.4s-4.7-6.4-10.1-3.5c-5.4 2.9-8.4 11.4-8.4 11.4s-8.2-5.9-14.4 5h97s-7.7-12.6-19.5-6.7c.1-.1-2.2-11.5-15-10.6z" />
<path fill="#47A97C" d="M-347.1 575.9s-3.6-11.7-16-12c-12.5-.3-13.6 16.4-13.6 16.4s-4.7-6.4-10.1-3.5c-5.4 2.9-8.4 11.4-8.4 11.4s-8.2-5.9-14.4 5h
