Cor de fundo do texto no SVG

Eu quero colorir o plano de fundo do text svg semelhante ao background-color em css

Eu só consegui encontrar documentação sobre fill , que colore o próprio texto

É mesmo possível?

Não, isso não é possível, os elementos SVG não possuem atributos de apresentação em background-...

Para simular esse efeito, você poderia desenhar um retângulo atrás do atributo text com fill="green" ou algo similar (filtros). Usando JavaScript você poderia fazer o seguinte:

 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); 

Você poderia usar um filtro para gerar o plano de fundo.

        solid background  

Não, você não pode adicionar cor de segundo plano aos elementos SVG. Você pode fazer isso programaticamente com 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"); 

A solução que usei é:

   Hello World! Hello World!  

Um item de texto duplicado está sendo colocado, com atributos de traço e largura de traço. O traçado deve corresponder à cor do plano de fundo e a largura do traçado deve ser grande o suficiente para criar uma “splodge” na qual o texto real deve ser escrito.

Um pouco de hack e há problemas em potencial, mas funciona para mim!

Resposta de Robert Longson (@RobertLongson) com modificações:

         solid background  solid background  

e não temos blower e nem “getBBox” pesado 🙂 O preenchimento é fornecido por espaços em branco no elemento de texto com filtro. Funcionou para mim

este é o meu hack favorito (não tenho certeza se deve funcionar). Refere-se a um elemento que ainda não é exibido e funciona muito bem

          custom text with background     

Em vez de usar uma tag , a tag pode ser usada, o que permite o conteúdo XHTML com CSS.