如何在SVG中创建可无限重复的文本水印？

把<text>放入pattern中没显示，通常是因为文本位置、尺寸设置不当，或者pattern的宽高没适配文本。以下是可以直接使用的实现代码：

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 定义重复的文本图案 -->
    <pattern id="draftPattern" x="0" y="0" width="150" height="120" patternUnits="userSpaceOnUse">
      <text x="0" y="20" font-family="Arial" font-size="16" fill="#cccccc" transform="rotate(-45)">Draft</text>
    </pattern>
  </defs>
  <!-- 用图案填充整个SVG区域 -->
  <rect x="0" y="0" width="100%" height="100%" fill="url(#draftPattern)" />
</svg>

关键细节说明： #

• pattern尺寸：width="150"和height="120"控制文本重复的间距，可根据需求调整数值
• 文本位置：y="20"是文本基线的位置，要略大于font-size（这里是16），确保文本完整显示；x="0"控制水平起始位置
• 水印样式：transform="rotate(-45)"让文本倾斜，符合常见水印的观感；fill="#cccccc"用浅灰色避免遮挡页面内容
• 全屏覆盖：外层<rect>设置宽高100%，确保水印铺满整个SVG区域

如果需要更淡的效果，可以给<text>添加opacity="0.5"属性；也可以调整font-size、pattern的宽高来改变水印的密度和大小。

内容的提问来源于stack exchange，提问作者Primordial_Hamster