I'm trying to create a text that says "Draft" and repeats indefinitely. It will be used to fill a page with watermarks. (I'm using SVG for this, instead of background-image, because I need it to appear in the print view as well).
Everywhere I look, I see examples of SVGs with repeating shapes. For example, this:
<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>But when I try to replace the shape in the pattern with <text>, it doesn't work (nothing appears in the svg).
How do I create a text that repeats indefinitely in intervals?
I did it for the text as @enxaneta kindly advised: By default y="0" and 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>The second option with filling the pattern with text at an angle.
To implement the tilt of a line of text, patternTransform="rotate(-35)" has been added
<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>