Для получения нужного диаметра окружности и расположения центра окружности, измените координаты цветных точек управления,- для этого наведите курсор на одну из точек и удержива¤ левую клавишу мышки переместите соответствующую точку.
Скопируйте код SVG.
Автор: Peter Collingridge
При каждом изменении параметров копируем формулу svg окружности в отдельный файл и добавляем заполнение цветом кругов.
|
1 2 3 4 5 6 7 |
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="100" viewBox="0 0 500 100" > <circle cx="50" cy="50" r="40" fill="purple" /> <circle cx="80" cy="50" r="40" fill="dodgerblue" /> <circle cx="110" cy="50" r="40" fill="yellowgreen" /> <circle cx="140" cy="50" r="40" fill="gold" /> </svg> |
Более подробно о параметрах окружностей здесь.
Анимация последовательного перемещения кругов из левого положения вправо и обратно.
Команды перемещения первой окружности вправо и назад:
|
1 2 |
<animate id="anPurple" attributeName="cx" begin="anDodger.end+0.2s" dur="0.25s" values="50;360" fill="freeze" /> <animate id="anPurpleB" attributeName="cx" begin="anPurple.end+0.4s" dur="0.25s" values="360;50" fill="freeze" /> |
где values=”50;350″ горизонтальные координаты начального и конечного положения центра окружности.
Ниже полный код анимации перемещения окружностей
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="100" viewBox="0 0 500 100" > <g fill-opacity="0.9"> <circle cx="50" cy="50" r="40" fill="purple" > <animate id="anPurple" attributeName="cx" begin="anDodger.end+0.2s" dur="0.25s" values="50;360" fill="freeze" /> <animate id="anPurpleB" attributeName="cx" begin="anPurple.end+0.4s" dur="0.25s" values="360;50" fill="freeze" /> </circle> <circle cx="80" cy="50" r="40" fill="dodgerblue" > <animate id="anDodger" attributeName="cx" begin="anYellowgreen.end+0.2s" dur="0.25s" values="80;390" fill="freeze" /> <animate id="anDodgerB" attributeName="cx" begin="anPurpleB.end+0.2s" dur="0.25s" values="390;80" fill="freeze" /> </circle> <circle cx="110" cy="50" r="40" fill="yellowgreen" > <animate id="anYellowgreen" attributeName="cx" begin="anGold.end+0.2s" dur="0.25s" values="110;420" fill="freeze"/> <animate id="anYellowgreenB" attributeName="cx" begin="anDodgerB.end+0.2s" dur="0.25s" values="420;110" fill="freeze" /> </circle> <circle cx="140" cy="50" r="40" fill="gold" > <animate id="anGold" attributeName="cx" begin="click" dur="0.25s" values="140;450" fill="freeze"/> <animate id="anGoldB" attributeName="cx" begin="anYellowgreenB.end+0.2s" dur="0.25s" values="450;140" fill="freeze"/> </circle> </g> </svg> |
Начало анимации по клику мышки на жёлтом круге.