Примеры SVG

Попробуйте это на практике

Ниже приведен пример, в котором код SVG напрямую вставлен в код HTML.

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

Примеры SVG

Основные формы SVG

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

Фильтры SVG

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

Градиент SVG

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

Различные элементы SVG

Прямоугольник, исчезающий повторно за 5 секунд
Прямоугольник, меняющий цвет и постоянно растущий
Три прямоугольника, меняющие цвет
沿着运动路径移动文本
Перемещение текста по движущемуся пути
Перемещение, вращение и масштабирование текста по движущемуся пути
Перемещение, вращение и масштабирование текста по движущемуся пути + изменяющийся цвет растущего прямоугольника