Автор: Peter Collingridge
Для получения нужного размера прямоугольника и расположения левого верхнего угла, измените координаты цветных точек управления,- для этого наведите курсор на одну из точек и удержива¤ левую клавишу мышки переместите соответствующую точку.
Скопируйте код SVG.
Пример стилизации
Удобно, что заранее видно, как будет выглядеть фигура. Можно сразу разместить например,- три прямоугольника и раскрасить их в разные цвета.
|
1 2 3 4 5 6 |
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 500 100" preserveAspectRatio="xMinYMin meet" > <rect x="30" y="35" width="100" height="60" fill="purple" /> <rect x="180" y="35" width="100" height="60" fill="dodgerblue" /> <rect x="330" y="35" width="100" height="60" fill="yellowgreen" /> </svg> |
Пример простой анимации
Анимация замены местами крайних прямоугольников.
Команда выполнения анимации для левого прямоугольника:
|
1 |
<animate id="anPurple" attributeName="x" begin="click" dur="2s" values="30;330;330;30;30" repeatCount="2" /> |
, где values=”30;330;330;30;30″ список изменения горизонтальных координат верхнего левого угла прямоугольника.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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" > <rect x="30" y="35" width="100" height="60" fill="purple" > <animate id="anPurple" attributeName="x" begin="click" dur="2s" values="30;330;330;30;30" repeatCount="2" /> </rect> <rect x="180" y="35" width="100" height="60" fill="dodgerblue" /> <g> <rect x="330" y="35" width="100" height="60" fill="yellowgreen" > <animate id="anGreen" attributeName="x" begin="anPurple.begin" dur="2s" values="330;30;30;330;330" repeatCount="2" /> </rect> <text x="50" y="70" font-size="14px" font-family="sans" pointer-events="none" fill="white" >Click me <animate attributeName="x" begin="anPurple.begin" dur="2s" values="50;350;350;50;50" repeatCount="2" /> </text> </g> </svg> |
Другие примеры анимации здесь
⇚ Генератор прямых отрезков
Следующая ⇛ Генератор окружностей