主页 / 问题 / 1548734
Accepted
Alexandr_TT
Asked:2023-10-30 20:49:13 +0000 UTC2023-10-30 20:49:13 +0000 UTC

如何在SVG中制作重复文本？

  • 772

我正在尝试创建无限重复的“草稿”文本。这将用于用水印填充页面。（我使用 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 中什么也没有出现）。

如何创建以一定间隔无限重复的文本？

问题的免费翻译如何在 SVG 中制作重复文本？来自成员 @Primordial_Hamster。

html

2 个回答

  1. Best Answer

    我做到了。您可能没有指定大小或字体。

    <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>

    • 4

  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的答案的免费翻译 。

    • 1

相关问题