Color de fondo del elemento tspan

Question

¿Es posible dar el color de fondo del elemento SVG <tspan>? Si no, ¿cuál sería la mejor manera de simularlo?

Mi objetivo es dar color de fondo al texto, y calculé que llenar los elementos <tspan> sería perfecto - ya "delinean" fragmentos de texto (<tspan> elementos) que representan líneas en texto de líneas múltiples.

El ejemplo estoy trabajando con:

<text x="100" y="100" font-size="30"> 
    <tspan>hello</tspan> 
    <tspan x="100" dy="1.2em">world</tspan> 
</text> 

Probé "llenar" atributo pero parece afectar a llenar (color) de texto, no el área detrás de él:

<tspan fill="yellow">hello</tspan> 

También intenté establecer color de fondo mediante CSS:

<style type="text/css">tspan { background-color: yellow }</tspan> 

..pero eso no funciona (al menos en Chrome 17 y Firefox) 12).

tspan envolver en <g> (o texto mismo en <g>) con "llenar" no funciona bien:

<g fill="yellow"><tspan>hello</tspan></g> 
<tspan><g fill="yellow">hello</g></tspan> 

Aparte de crear un elemento <rect> posicionado en el mismo lugar - algo que me gustaría evitar - ¿hay otra forma de lograr esto?

Answer 1

Un rect es probablemente la mejor manera de hacer eso (suponiendo que solamente se trata de las formas más simples de texto).

Los tspans no tienen "fondo" ellos mismos en SVG 1.1, el fondo es lo que se pinta antes del tspan. Hay muchos casos para considerar, como el caso en el que un tspan está dentro de un textPath que tiene la forma de un círculo. También tenga en cuenta que no es tan simple como un rectángulo continuo en todos los casos, un solo tspan puede ser sesgado, rotado y dividido en varias formas intersecantes y no intersecantes debido a transformaciones, posicionamiento de glifos, etc.

Hay otra manera Se puede pensar que haría esto sin secuencias de comandos, pero luego tendría que saber el ancho de la cadena de antemano (por ejemplo, mediante el uso de una fuente monoespaciado). Si tiene eso, entonces puede agregar otro elemento tspan usando la fuente Ahem, colocándolo antes del otro tspan en el documento y dándole la misma posición x, y como el tspan al que quiere dar un "fondo".

De lo contrario, la forma de hacerlo es a través de scripts y agregando rectángulos (o tspans con una fuente similar a Ahem).

Answer 2

SVG no admite la especificación directa de un color de fondo de imagen ... pero puede ajustar los cuatro valores del atributo viewBox (complicado). Sé que es algo que quieres evitar, pero CSS no te ayudaría.

... o puede usar getBBox y getCTM ... le daría ventajas para el texto rotado. Ejemplo: http://srufaculty.sru.edu/david.dailey/svg/getCTM.svg