是否可以在svg或css中获得文本背景?这意味着,每个角色都有背景? 这是一个例子: 我已经在photoshop中做了这个并制作了一个面具,我只是想知道我有可能在svg或css?解决方法 这是
... . . 是否可以在svg或css中获得文本背景?这意味着,每个角色都有背景?
这是一个例子:
我已经在photoshop中做了这个并制作了一个面具,我只是想知道我有可能在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>. . .. ...