css - 如何通过 CSS 使 SVG textPath 在 div background-image 中工作?
问题描述
如何通过 CSS 使 SVG textPath 在 div background-image 中工作? 这是我在 CodePen 上的工作技巧
此代码适用于 HTML 版本,但不适用于 CSS。
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='decorative-text-link' role='link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 10'%3E %3Cdefs%3E %3Cpath id='squiggle_link_text' style='stroke:none'; fill='none' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E %3C/defs%3E %3Cg style='font-family:Lato; font-size:.1rem'%3E %3Cuse xlink:href='#squiggle_link_text'/%3E %3Ctext%3E %3CtextPath xlink:href='#squiggle_link_text'%3EThere is a link%3C/textPath%3E %3C/text%3E %3C/g%3E %3C/svg%3E");
解决方案
您的 SVG 中有语法错误,一个流浪者;在属性引号之外而不是在内部。
您还没有对 # 字符进行 URL 编码,这些字符根据适当的规范无效,并且在 Firefox 中不起作用。
我在下面更正了这些问题。
html, body, div {
width: 100%;
height: 100%;
}
div {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='decorative-text-link' role='link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 10'%3E %3Cdefs%3E %3Cpath id='squiggle_link_text' style='stroke:none;' fill='none' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E %3C/defs%3E %3Cg style='font-family:Lato; font-size:.1rem'%3E %3Cuse xlink:href='%23squiggle_link_text'/%3E %3Ctext%3E %3CtextPath xlink:href='%23squiggle_link_text'%3EThere is a link%3C/textPath%3E %3C/text%3E %3C/g%3E %3C/svg%3E");
}
<div></div>
推荐阅读
- python - 通过邮递员上传的二进制文件在我的烧瓶应用程序中已损坏
- git - 如何在结帐/克隆中包含被忽略的文件?
- batch-file - 如何删除每行文本的第一个“文本”
- python - pyqtdeploy - 没有这样的文件或目录,构建尝试复制不存在的子目录
- django - 具有两种形式的 Django 视图未发布一个
- rust - 如何使用它们连接的节点迭代 Petgraph 节点的边缘?
- ios - 如何在swift中自动导入依赖框架
- javascript - alpinejs中未定义的文件请求
- google-apps-script - 从旧时间戳的响应表中追加和删除行?
- python - discord.py 男高音 api 我做错了吗?