侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

文本与svg或css中的图像背景

2022-12-27 星期二 / 0 评论 / 0 点赞 / 27 阅读 / 1368 字

是否可以在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>
. . .. ...

广告 广告

评论区