在SVG或CSS中使用带有图像背景的文本

Question

在SVG或CSS中是否可以为文本设置背景？这意味着每个字符都有背景？以下是示例：

我已经在Photoshop中制作了这个效果并创建了一个遮罩，我只是想知道它是否可以在SVG或CSS中实现。

- PFK

---

可能是使用背景图像填充SVG路径元素的重复问题。 - robertc

这是元素（如圆形或矩形），不是文本。我需要文本。 - PFK

是的，之后意识到了，现在正在尝试找到这个重复问题的正确提问。不过，文本的工作方式完全相同，示例。 - robertc

这是一个关于文本的问题，具体内容请参考以下链接：https://dev59.com/qVDTa4cB1Zd3GeqPHTvu#3636303。 - robertc

谢谢大家。有没有可能为每个字符设置背景？ - PFK

Answer 1

以下是一个使用模式的示例。它使用带有图案填充的<tspan>元素，以显示如何在需要时按字符设置图案填充：

演示: http://jsfiddle.net/xWNR3/2/

<svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink">
  <style>
    svg  { background:#ddd }
    text {
      font-family:Verdana; font-size:160pt; font-weight:bold;
      stroke:#000;
    }
  </style>
  <defs>
    <pattern id="p1" patternUnits="userSpaceOnUse" width="32" height="32">
      <image x:href="alphaball.png" width="32" height="32" />
    </pattern>
    <pattern id="p2" patternUnits="userSpaceOnUse" width="10" height="10">
      <image x:href="grid.gif" width="10" height="10" />
    </pattern>
  </defs>
  <text x="20" y="170" fill="url(#p1)">
    Hello
    <tspan x="20" y="350"
           fill="url(#p2)">Wo<tspan fill="url(#p1)">r</tspan>ld</tspan>
  </text>
</svg>

- Phrogz

Answer 2

你也可以使用遮罩或剪切路径来实现这一点，除了像robertc建议的使用图案的方式之外。

这里是一个使用剪切路径的svg测试套件示例。

- Erik Dahlström