4

是否可以在 svg 或 css 中有文本背景？这意味着，每个角色都有背景？这是示例：

带有背景蒙版的文本

我在 Photoshop 中做了这个并做了一个面具，我只是想知道我可以在 svg 或 css 中使用它吗？

4

2 回答 2

18

这是一个使用模式的示例。如果需要，它使用<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>
于 2012-06-01T16:15:45.083 回答
2

除了 robertc 建议的答案中的模式之外，您也可以使用掩码或clipPath来执行此操作。

这是svg 测试套件中使用 clipPath的示例。

于 2012-06-01T10:46:10.847 回答