如何通过 CSS 使 SVG textPath 在 div background-image 中工作？答案

【问题标题】：How to make SVG textPath work in div background-image via CSS?如何通过 CSS 使 SVG textPath 在 div background-image 中工作？
【发布时间】：2019-03-11 00:24:54
【问题描述】：

如何通过 CSS 使 SVG textPath 在 div background-image 中工作？ Here is my working craft on 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");

【问题讨论】：

标签： css svg background-image

【解决方案1】：

您的 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");
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

感谢Longson先生的清晰解释和代码更正！