svg 或 css 中带有图像背景的文本 [英] Text with image background in svg or css
本文介绍了svg 或 css 中带有图像背景的文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否可以在 svg 或 css 中为文本设置背景?这意味着,每个角色都有背景?这是示例:
Is it possible to have background for text in svg or css? it means , every character have background? here is the example:
我已经在photoshop中制作了这个并制作了一个面具,我只是想知道我可以在svg或css中使用吗?
I have made this in photoshop and made a mask, i just wonder i it is possible in svg or css?
推荐答案
这是一个使用模式的示例.如果需要,它使用带有图案填充的
元素向您展示如何在每个字符的基础上完成此操作:
Here is an example using a pattern. It uses <tspan>
elements with patterned fill to show you how this may be done on a per-character basis, if desired:
<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>
这篇关于svg 或 css 中带有图像背景的文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文