文本与图像背景在svg或css [英] Text with image background in svg or css

问题描述

可以在svg或css中有文本的背景吗？它的意思是，每个人物都有背景？
这里是例子：

Is it possible to have background for text in svg or css? it means , every character have background? here is the example:

我在photoshop做了这个，做了一个面具，我只是想知道我有可能在svg或css？

I have made this in photoshop and made a mask, i just wonder i it is possible in svg or css?

推荐答案

这里是使用模式的示例。它使用带有图案填充的< tspan> 元素来显示如何根据需要在每个字符的基础上完成此操作：

Here is an example using a pattern. It uses <tspan> elements with patterned fill to show you how this may be done on a per-character basis, if desired:

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

这篇关于文本与图像背景在svg或css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！