Как сделать повторяющийся текст в SVG?

Question

Я пытаюсь создать текст с надписью «Draft», который повторяется бесконечно. Он будет использоваться для заполнения страницы водяными знаками. (Я использую для этого SVG вместо фонового изображения, потому что мне нужно, чтобы оно также отображалось в режиме печати).

Куда бы я ни посмотрел, я вижу примеры SVG с повторяющимися фигурами. Например, это:

<svg width="100%" height="100%" xmlns='http://www.w3.org/2000/svg' style="border: 1px solid red">
    <defs>
        <pattern id="basicPattern" x="10" y="10" width="40" height="40" patternUnits="userSpaceOnUse">
            <circle cx="20" cy="20" r="20" fill="#64bee3" />
        </pattern>
    </defs>
    <rect x="10" y="10" width="100%" height="100%" stroke="#333333" stroke-width="2" fill="url(#basicPattern)" />
</svg>

Но когда я пытаюсь заменить фигуру в шаблоне на <text>, это не работает (в svg ничего не появляется).

Как создать текст, который повторяется бесконечно через определенные промежутки времени?

_{Свободный перевод вопроса How do I make a repeating text in an SVG? от участника @Primordial_Hamster.}

Answer 1

А у меня получилось. Возможно, Вы не указали размер или шрифт.

<svg width="100%" height="100%" xmlns='http://www.w3.org/2000/svg' style="border: 1px solid red">
    <defs>
        <pattern id="basicPattern" x="10" y="10" width="250" height="70" patternUnits="userSpaceOnUse" patternTransform="rotate(20)">
  <style>
.small {
  font: italic 13px sans-serif;
}
.heavy {
  font: bold 30px sans-serif;
}

/* Note that the color of the text is set with the    *
 * fill property, the color property is for HTML only */
.Rrrrr {
  font: italic 40px serif;
  fill: red;
}
  </style>

  <text x="20" y="35" class="small">My</text>
  <text x="40" y="35" class="heavy">cat</text>
  <text x="55" y="55" class="small">is</text>
  <text x="65" y="55" class="Rrrrr">Grumpy!</text>            </pattern>
    </defs>
    <rect x="10" y="10" width="100%" height="100%" stroke="#333333" stroke-width="2" fill="url(#basicPattern)" />
</svg>

Answer 2

Задайте по умолчанию координаты начала текста x,y и выравнивание текста alignment-baseline="hanging"

<svg width="100%" height="100%" xmlns='http://www.w3.org/2000/svg' style="border: 1px solid red">
    <defs>
        <pattern id="basicPattern" patternUnits="userSpaceOnUse" width="200" height="100" >
            <text x="50" y="0" font-family="Avenir" font-size="40" alignment-baseline="hanging">Draft</text>
        </pattern>
    </defs>
   <rect width="100%" height="100%" fill="url(#basicPattern)" />
</svg>

Второй вариант с заполнением паттерна текстом под углом.

Для реализации наклона строки текста был добавлен patternTransform="rotate(-35)"

<svg width="100%" height="600" xmlns='http://www.w3.org/2000/svg' style="border: 1px solid red">
    <defs>
        <pattern id="basicPattern" patternUnits="userSpaceOnUse" width="150" height="100" patternTransform="rotate(-35)" >
            <text x="70" y="0" font-family="Avenir" font-size="30" alignment-baseline="hanging">Draft</text>
        </pattern>
    </defs>
   <rect width="100%" height="650" fill="url(#basicPattern)" />
</svg>

_{Свободный перевод ответа от участника @Alexandr_TT.}

БЛОГ НА HUSL

Как сделать повторяющийся текст в SVG?

Ответы (2 шт):