Snap.svg — это JavaScript-библиотека для работы с SVG-графикой в современных браузерах. Библиотека пришла на смену другой популярной библиотеке Raphaël. Автором обеих библиотек является один и тот же человек - Дмитрий Барановскй.
Библиотека бесплатна и с открытым исходным кодом под лицензией Apache 2.
Домашняя страница библиотеки - Snap.svg - Home
Скачайте последнюю версию. В архиве находятся несколько папок. Для работы вам нужна папка dist, в котором есть две версии библиотеки - обычная и сжатая. Для веба лучше использовать сжатую версию.
В других папках находится документация и примеры. Но эти же примеры можно просмотреть и на сайте.
Вы можете создать SVG программно, а также работать с готовыми SVG-файлами. Огромный выбор методов поможет вам создать красивые эффекты.
Создадим минимальный пример.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snap.svg</title>
<script src="snap.svg-min.js"></script>
</head>
<body>
<h1>Snap.svg</h1>
<script>
var s = Snap(300, 300);
var bigCirlce = s.circle(90, 120, 80);
var redCircle = s.circle(40, 30, 25);
redCircle.attr({
fill: "darkorange",
stroke: "green",
strokeWidth: 3
});
</script>
</body>
</html>
В этом примере мы подключили библиотеку, затем программно создали объект Snap, который позволяет создавать фигуры, например, круги.
Метод circle() создаёт круг. Также есть методы для создания других фигур.
Метод attr() задаёт атрибуты для SVG.
Как видите, ничего сложного. Но вы можете создавать потрясающие сценарии, изучив все возможности библиотеки.
В примере мы создали объект SVG программно через var s = Snap(300, 300). Можно также присоединиться к существующему объекту SVG на странице через его идентификатор var s = Snap("#snap").
<style>
#snap {
border-radius: 10px;
border: solid 2px #ccc;
width: 300px;
height: 300px;
margin-right: 10px;
}
</style>
<svg id="snap"></svg>
<script>
var s = Snap("#snap");
var bigCircle = s.circle(150, 150, 100);
bigCircle.attr({
fill: "orange",
strokeWidth: 3,
stroke: "magenta"
})
</script>
Вернуться в раздел SVG