Штриховкой и перекрестной штриховкой можно назвать близко расположенные параллельные линии, которые используются для изображения тени, плотности и окрашивания в иллюстрациях. Они используется всюду: от гравюр до комиксов, и их довольно легко создать как фоны SVG. Так как штриховка и перекрестная штриховка близка к сеткам, рассмотрим и их. Простая штриховка в SVG также близка к полосам и диагоналям, различие между ними в том, что у штриховки больше разница между шириной линий и расстоянием между ними.

Штриховка

Наиболее простая штриховка — это диагональная линия, которая задается с помощью элемента узора:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <style type="text/css">
        line { stroke: #ccc; }
    </style>
<defs>
<pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
  <line x1="0" y1="0" x2="0" y2="10" />
</pattern>
</defs>
    <rect width="100%" height="100%" fill="url(#diagonalHatch)" />
</svg>

Плотность штриховки может контролироваться с помощью изменения значения ширины узора: меньшее значение создаст более близкие линии, большее значение раздвинет линии дальше друг от друга. Тон создается с помощью цвета, применяемого к линиям с помощью кода CSS. Значение ширины линии можно изменять для создания более жирных штрихов.

Сетки

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

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <style type="text/css">
        line { stroke: #ccc; }
    </style>
    <defs>
        <pattern id="grid" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(45)">
            <line x1="5" y1="0" x2="5" y2="10" />
            <line x1="0" y1="5" x2="10" y2="5" />
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#grid)" />
</svg>

Код выше, сохраненный как файл grid.svg и примененный с помощью следующего кода CSS:

body {
    background-image: url(grid.svg);
}

будет выглядеть так:

Сетка может быть преобразована в массив маленьких крестиков с помощью удвоения ширины и высоты узора. Сама сетка может быть увеличена или уменьшена с использованием  функции масштабирования на значении трансформации узора.

Перекрестная штриховка

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

line { stroke: #333; stroke-width: 6px; }

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

line:nth-child(odd) {
        stroke: #555; stroke-width: 6px;
}
line:nth-child(even) {
        stroke: #333; stroke-width: 5px;
}

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

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <style type="text/css">
        line { stroke: #ccc; stroke-width: 3; }
    </style>
    <defs>
        <pattern id="grid1" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(16)">
            <line x1="5" y1="0" x2="5" y2="10" />
        </pattern>
        <pattern id="grid2" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(32)">
            <line x1="5" y1="0" x2="5" y2="10" />
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#grid1)" />
    <rect width="100%" height="100%" fill="url(#grid2)" />
</svg>

Шахматная доска

Подобный способ можно использовать для создания фона в виде шахматной доски:

С помощью такого кода:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <style type="text/css">
        #checkerboard { fill: #ccc; }
    </style>
    <defs>
        <pattern id="checkerboard" patternUnits="userSpaceOnUse" width="50" height="50">
            <rect x="0" y="0" width="25" height="25" />
            <rect x="25" y="25" width="25" height="25" />
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#checkerboard)" />
</svg>

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

Штриховку и перекрестную штриховку можно также использовать для превращения изображений в гравюры и иллюстрации из комиксов.

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

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

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

• Создание маркировки для списков с использованием изображений
• Создание необычных непрямоугольных веб-дизайнов
• Создание бокового меню