是否可以在 svg 或 css 中为文本设置背景?也就是说,每个 Angular 色都有背景? 这是示例:
我已经在 photoshop 中制作了这个并制作了一个 mask ,我只是想知道我是否可以在 svg 或 css 中使用它?
最佳答案
这是一个使用模式的例子。它使用 <tspan>
如果需要,带有图案填充的元素向您展示如何在每个字符的基础上完成此操作:
演示:http://jsfiddle.net/xWNR3/2/
<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>
关于css - 带有 svg 或 css 图像背景的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10846504/