В веб-разработке регулярно используются два типа водяных знаков:
1. Водяные знаки на страницах, используемые для повышения узнаваемости бренда.
2. Водяные знаки изображений и видео, используемые для обозначения права собственности и защиты авторских прав.
Ранее я уже решал проблему представления нескольких диагональных текстовых элементов на фоне страницы. В моем предыдущем решении использовались изображения PNG, но гораздо эффективнее создать SVG с элементом <pattern>
Однострочный пример:
|
1 2 3 4 5 6 7 8 |
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> <defs> <pattern id="textstripe" patternUnits="userSpaceOnUse" width="400" height="200" patternTransform="rotate(-45)"> <text y="30" font-family="Avenir" font-size="40">DUDLEY STOREY</text> </pattern> </defs> <rect width="100%" height="100%" fill="url(#textstripe)" /> </svg> |
Введение еще одной строки в водяной знак между предыдущим текстом достигается добавлением второго паттерна, а третий объединяет оба паттерна в один:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="border:1px solid gray"> <style type="text/css"> text { fill: gray; font-family: Avenir; } </style> <defs> <pattern id="twitterhandle" patternUnits="userSpaceOnUse" width="400" height="200"> <text y="30" font-size="40" id="name">@dudleystorey</text> </pattern> <pattern xlink:href="#twitterhandle"> <text y="120" x="200" font-size="30" id="occupation">web developer</text> </pattern> <pattern id="combo" xlink:href="#twitterhandle" patternTransform="rotate(-45)"> <use xlink:href="#name" /> <use xlink:href="#occupation" /> </pattern> </defs> <rect width="100%" height="100%" fill="url(#combo)" /> </svg> |
Создавая шаблоны таким образом, можно с относительно небольшими усилиями создавать сложные фоны из базовых компонентов… а текст остается полностью живым и редактируемым, в чем вы можете убедиться, воспользовавшись формой, встроенной в демо.
Обратите внимание, что приведенный выше код был сохранен в чистоте благодаря соблюдению нескольких лучших практик SVG:
1. Атрибуты представления были преобразованы в CSS, где это необходимо.
2. Второй и третий pattern ссылаются на первый через ссылку xlink, наследуя ширину и высоту исходного pattern.
3. Преобразование patternTransform=”rotate(-45) было оставлено для последнего pattern, а не повторяло вращение.
Демо в верхней части этой страницы делает текст динамичным; при нормальных обстоятельствах желаемый текст водяного знака (и выбор шрифта, цвета и т. д.) будет жестко запрограммирован в SVG, на который затем будет ссылаться как на фоновое изображение.
Ознакомьтесь с демо-версией CodePen для этой статьи по адресу
Перевод статьи: Generate Page Watermarks with SVG @dudleystorey