Вопрос по svg, css – Текст с фоновым изображением в SVG или CSS

4

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

text with background mask

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

Это элемент (например, круг или прямоугольник), а не текст. Мне нужно для текста PFK
возможный дубликатFill SVG path element with a background-image robertc
тхн все. есть ли возможность иметь фон для каждого персонажа? PFK
Да, понял, что потом, пытаясь найти правильный вопрос, это дубликат сейчас. Текст работает точно так же, хотя,example. robertc

Ваш Ответ

2   ответа
15

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

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

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

Похожие вопросы