Мы давно хотели создать генератор фоновых узоров SVG: уже существует много хороших генераторов, но они не используют все богатство возможностей, доступное в этой технологии для создания изображений. То, что Вы видите ниже, — только прототип, показывающий широту возможностей конструирования узоров из кругов. Его создание показалось нам достаточно интересным для того, чтобы описать его в этом уроке.

Базовый код SVG

Базовый код SVG без каких-либо взаимодействий состоит из элемента круга в элементе узора. Этот круг используется один раз в начальном положении, а его копии сдвинуты вверх, влево, вниз и вправо:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" id="linkedcircles">
<defs>
    <pattern id="chainedcircles" patternUnits="userSpaceOnUse" width="250" height="250">
        <circle cx="125" cy="125" r="100" stroke-width="2" stroke="#fff" fill="none" id="circ" />
        <use xlink:href="#circ" />
        <use xlink:href="#circ" transform="translate(125)"/>
        <use xlink:href="#circ" transform="translate(-125)"/>
        <use xlink:href="#circ" transform="translate(0 125)"/>
        <use xlink:href="#circ" transform="translate(0 -125)"/>
    </pattern>
</defs>
<rect width="100%" height="100%" fill="url(#chainedcircles)" />
</svg>

Вставляем строчный SVG в код CSS

Можно было бы использовать этот код SVG в коде CSS, если сохранить его как отдельный файл и обращаться к нему в таблице стилей:

body {
  min-height: 100vh;
  background-color: #000;
  background-image: url("circles.svg");
  margin: 0;
}

Однако это не позволит изображению SVG быть динамическим. К сожалению, пока что нельзя поместить сам код SVG на веб-страницу и вставить ссылку на него в код CSS, если не использовать предложенную разработчиками Mozilla функцию -moz-element():

background-image: -moz-element(#linkedcircles);

Если записать код SVG строчно в значение фона изображения:

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"… ');

Нужного результата тоже не получится: браузеры на движке Webkit и основанных на нем движках поймут такую запись, но как минимум у некоторых версий браузера Firefox могут быть проблемы с отображением, а браузер Internet Explorer совсем не сможет показать изображение SVG.

Использование JavaScript

Более подходящим решением для динамического фона будет отобразить изображение SVG с помощью кодирования base-64. Если изображение SVG будет строковой переменной, можно закодировать его, используя способ window.btoa, после этого добавить правильный тип содержимого и задать его фоновым изображением с помощью JavaScript:

var svgString = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" …';
window.btoa(svgString);
var url = 'data:image/svg+xml;base64,' + encodedData;
document.body.style.backgroundImage = "url("+url+")";

В этом случае в примере ниже элементы пользовательского интерфейса — это поля ввода диапазона и цвета внутри формы с идентификатором patterncontrols. С помощью передачи событий данные полей ввода из этой формы отсылаются в функцию:

var patternMaker = document.getElementById("patterncontrols");
patternMaker.addEventListener("input", function(e) {
  svg();
})

Функция svg() читает текущие значения полей ввода:

function svg() {
var radius =  document.getElementById("radius").value,
thickness =  document.getElementById("thickness").value,
…

И объединяет их в строке, так что центральный круг становится таким:

<circle r="'+radius+'" stroke-width="'+thickness+'"
stroke="'+circColor+'"… >

Можно увидеть эти эффекты, использовав ползунки ниже. Особенно интересно использовать изменение расстояний, которое меняет значение перемещения для копий исходного элемента круга, и изменение размера, которое меняет величину элемента узора, всегда оставляя исходный элемент круга в центре.

Также эту демонстрацию работы можно увидеть на сайте CodePen.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Фоновые узоры в виде чешуи и шестиугольников с использованием SVG
• Создание рекурсивного дизайна SVG, часть вторая
• Создание рекурсивного дизайна SVG, часть первая