Цвет фона текста в SVG

Я хочу покрасить фон svgtext подобный background-color в css

Я смог найти документацию по fill , которая окрашивает сам текст

Возможно ли это?

Нет, это невозможно, элементы SVG не имеют атрибутов background-... presentation .

Чтобы имитировать этот эффект, вы могли бы нарисовать прямоугольник за текстовым атрибутом с fill="green" или что-то подобное (фильтры). Используя JavaScript, вы можете сделать следующее:

 var ctx = document.getElementById("the-svg"), textElm = ctx.getElementById("the-text"), SVGRect = textElm.getBBox(); var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", SVGRect.x); rect.setAttribute("y", SVGRect.y); rect.setAttribute("width", SVGRect.width); rect.setAttribute("height", SVGRect.height); rect.setAttribute("fill", "yellow"); ctx.insertBefore(rect, textElm); 

Вы можете использовать фильтр для создания фона.

        solid background  

Нет, вы не можете добавить цвет фона к элементам SVG. Вы можете сделать это программно с помощью d3 .

 var text = d3.select("text"); var bbox = text.node().getBBox(); var padding = 2; var rect = self.svg.insert("rect", "text") .attr("x", bbox.x - padding) .attr("y", bbox.y - padding) .attr("width", bbox.width + (padding*2)) .attr("height", bbox.height + (padding*2)) .style("fill", "red"); 

Решение, которое я использовал, это:

   Hello World! Hello World!  

Устанавливается дублирующийся текстовый элемент с атрибутами хода и ширины штриха. Инсульт должен соответствовать цвету фона, а ширина штриха должна быть достаточно большой, чтобы создать «splodge», на котором можно записать фактический текст.

Немного взлома, и есть потенциальные проблемы, но работает для меня!

Ответ Роберта Лонгсона (@RobertLongson) с изменениями:

         solid background  solid background  

и у нас нет никакого смазывания и никакого тяжелого «getBBox» :). Заполнение обеспечивается белыми пробелами в текстовом элементе с фильтром. Это сработало для меня

это мой любимый хак (не уверен, что он должен работать). Он ссылается на элемент, который еще не отображается, и он работает очень хорошо

          custom text with background     

Вместо тега можно использовать тег , который позволяет использовать контент XHTML с помощью CSS.

  • Почему я не могу ссылаться на линейный gradleиент SVG, определенный во внешнем файле (сервер рисования)?
  • Как включить шрифт в значок svg?
  • Как разрезать отверстие в прямоугольнике SVG
  • Рисование SVG-файла на canvasе HTML5
  • Рисуем SVG на canvasе HTML5 с поддержкой элемента font
  • семантическое масштабирование диаграммы направленности силы в d3
  • Преобразование анимированных SVG в фильм
  • Chrome не передает SVG с помощью тега
  • Как преобразовать SVG в PDF в Linux
  • Угловые и SVG-фильтры
  • Удаление селекторов элементов HTML хоста, созданных угловым компонентом
  • Давайте будем гением компьютера.