Полоски с наклоном на SVG

С помощью SVG легко задать паттерн наклонных линий. Простой пример.


<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <defs>
        <pattern id="pinstripe" patternUnits="userSpaceOnUse" width="50" height="50">
            <line x1="25" y="0" x2="25" y2="50" stroke="goldenrod" stroke-width="25" />
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#pinstripe)" />
</svg>

В этом примере не используется viewBox, вместо него используются width и height. Тег pattern имеет свои собственные размеры ширины и высоты. Атрибут patternUnits указывает на лимит повторения узора. Тег pattern задан внутри defs. Он не рисуется, пока на него не будет дана ссылка. В rect мы ссылаемся на паттерн.

Применив созданный SVG-файл в качестве фона страницы, мы получим обычные полоски как в первой статье:


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

Для демонстрации ограничимся контейнером.

Но pattern позволяет легко изменять поведение элементов. Внесём небольшие правки в diagonal.svg.


<pattern id="pinstripe" patternTransform="rotate(45)" patternUnits="userSpaceOnUse" width="50" height="50">

Вы можете задать любой угол наклона в patternTransform.

Напомню, что цвет между полосками меняется через свойство background-color в CSS:


body {
	background-image: url(diagonal2.svg);
	background-color: darkblue;
}

Можно менять угол наклона динамически через JavaScript - пример на CodePen.

Вернуться в раздел SVG в качестве фонового рисунка.

Полоски с наклоном на SVG

Реклама