Последние учебники веб-разработки
 

SVG Примеры


Попробуйте-это самостоятельно Примеры

Приведенные ниже примеры вставлять код SVG прямо в HTML-коде.

Это поддерживается Firefox, Internet Explorer 9, Google Chrome, Opera и Safari.


SVG Примеры

SVG Основные фигуры

Круг
Прямоугольник
Прямоугольник с непрозрачностью
Прямоугольник с непрозрачностью 2
Прямоугольник с закругленными углами
эллипс
Три эллипсы друг на друга
Два эллипсы
линия
Многоугольник с тремя сторонами
Многоугольник с четырех сторон
Звезда
Еще одна звезда
полилиния
Еще одна ломаная
Путь
Квадратичная кривая Безье
Написать текст
Поворот текста
Текст на нескольких строках
Текст как ссылку
Определяет цвет линии, текст или контур (stroke)
Определяет ширину линии, текст или контур (stroke-width)
Определяет различные типы окончаний к открытому пути (stroke-linecap)
Определяет пунктирные линии (stroke-dasharray)

SVG Фильтры

feGaussianBlur - эффект размытия
feOffset - офсет прямоугольник, а затем смешать оригинал на верхней части изображения смещения
feOffset - размыть изображение смещения
feOffset - сделать тень черный
feOffset - рассматривать тень как цвет
FeBlend фильтр
Фильтр 1
Фильтр 2
Фильтр 3
Фильтр 4
Фильтр 5
Фильтр 6

SVG Градиенты

Эллипсом с горизонтальным линейным градиентом от желтого до красного
Эллипсом с вертикальным линейным градиентом от желтого до красного
Эллипсом с горизонтальным линейным градиентом от желтого до красного, и текст
Эллипс с радиальным градиентом от белого до синего
Другой эллипс с радиальным градиентом от белого до синего

SVG Разное

Прямоугольник , который неоднократно исчезают в течение 5 секунд
Растущий прямоугольник , который изменит цвет
Три прямоугольниками , которые меняют цвет
Перемещение текста вдоль траектории движения
Переместить, вращать и масштабировать текст вдоль траектории движения
Переместить, вращать и масштабировать текст вдоль траектории движения + растущий прямоугольник , который будет менять цвет
Вращающийся эллипсы