Как заставить SVG textPath работать в div background-image через CSS? - PullRequest
Новая
       34

Как заставить SVG textPath работать в div background-image через CSS?

0 голосов
/ 05 октября 2018

Как заставить SVG textPath работать в div background-image через CSS? Вот мой рабочий код на 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");

1 Ответ

0 голосов
/ 05 октября 2018

У вас есть синтаксическая ошибка в вашем 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>
...