Текст с фоновым изображением в SVG или CSS

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

text with background mask

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

 robertc01 июн. 2012 г., 09:58
возможный дубликатFill SVG path element with a background-image
 PFK01 июн. 2012 г., 10:02
Это элемент (например, круг или прямоугольник), а не текст. Мне нужно для текста
 robertc01 июн. 2012 г., 10:04
Да, понял, что потом, пытаясь найти правильный вопрос, это дубликат сейчас. Текст работает точно так же, хотя,example.
 robertc01 июн. 2012 г., 10:07
 PFK01 июн. 2012 г., 10:12
тхн все. есть ли возможность иметь фон для каждого персонажа?

Ответы на вопрос(2)

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

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

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

Здесь & APOS; sпример из svg testsuite с использованием clipPath.

Ваш ответ на вопрос