Вырезаем фрагмент изображения. SVG - анимация

В этом примере одновременно продемонстрированы следующие возможности svg-графики: анимация, наложение масок на изображения и масштабирование. Движущаяся по карте пара окружностей вырезает внутреннее для окружностей изображение с карты и отображает его как отдельное изображение. Ваша неуемная фантазия веб-мастера подскажет вам, как это можно использовать на вашем сайте.

А теперь приводим svg-код. Обратите внимание - никаких скриптов.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="550" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image id="park" x="0" y="0" width="100%" height="300" xlink:href="/picture/demo/maps-svg.png"> <title>Моя территория</title> </image> <clipPath id="circle-clip"> <circle id="myClip1" cx="15%" cy="30%" r="10%"> <animate attributeName="cx" values="15%;70%;15%" dur="10s" repeatCount="indefinite"/> </circle> <circle id="myClip2" cx="25%" cy="30%" r="10%"> <animate attributeName="cx" values="25%;80%;25%" dur="10s" repeatCount="indefinite"/> </circle> </clipPath> <use xlink:href="#park" transform="translate(0,0)"/> <use xlink:href="#park" style="clip-path: url(#circle-clip)" transform="translate(0,240)" /> <use xlink:href="#myClip1" stroke="red" stroke-width="3" fill="none" transform="translate(0,0)"/> <use xlink:href="#myClip2" stroke="red" stroke-width="3" fill="none" transform="translate(0,0)"/> <text x="48%" y="320" fill="black"> после вырезания </text> <text x="50%" y="200" fill="black" opacity="0"> <animate attributeName="opacity" values="1;0" dur="10s" repeatCount="1"/> Загрузка...</text> </svg>