Текст с фоном изображения в svg или css

Возможно ли иметь фон для текста в svg или css? это означает, что у каждого персонажа есть фон? вот пример:

text with background mask

Я сделал это в фотошопе и сделал маску, мне просто интересно, возможно ли это в svg или css?

Ответы

Ответ 1

Вот пример использования шаблона. Он использует элементы <tspan> с узором с рисунком, чтобы показать вам, как это можно сделать на основе каждого символа, если желательно:

Демо: http://jsfiddle.net/xWNR3/2/

The text "Hello World" with each letter of the first word filled with one pattern, and each letter of the second word filled with another pattern, except the "r" which is filled with the first pattern.

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

Ответ 2

Вы можете использовать mask или clipPath сделать это тоже, в дополнение к способу с шаблонами, как в ответах, предложенных robertc.

Здесь пример из svg testsuite с помощью clipPath.