Текст с фоновым изображением в SVG или CSS
Возможно ли иметь фон для текста в SVG или CSS? значит, у каждого персонажа есть фон? вот пример:
Я сделал это в фотошопе и сделал маску, мне просто интересно, возможно ли это в svg или css?
возможный дубликатFill SVG path element with a background-image
Это элемент (например, круг или прямоугольник), а не текст. Мне нужно для текста
Да, понял, что потом, пытаясь найти правильный вопрос, это дубликат сейчас. Текст работает точно так же, хотя,example.
Here's the one specifically about text.
тхн все. есть ли возможность иметь фон для каждого персонажа?
Ответы на вопрос(2)
<tspan> элементы с шаблонным заполнением, чтобы показать, как это можно сделать для каждого символа, если это необходимо:
<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.