Цвет фона элемента tspan

Question

Можно ли задать цвет фона элемента SVG <tspan>? Если нет, то как лучше всего смоделировать это?

Моя цель - придать цвету фона цвет, и я подумал, что заполнение <tspan> элементов будет идеальным - они уже "обрисовывают в общих чертах" куски текста (<tspan> элементов), которые представляют строки в многострочном тексте.

Пример, с которым я работаю:

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

Я пробовал атрибут "fill", но, похоже, он влияет на заливку (цвет) текста, а не на область за ним:

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

Я также пытался установить цвет фона с помощью CSS:

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

.. но это не работает (по крайней мере в Chrome 17 и Firefox 12).

Упаковка tspan в <g> (или самого текста в <g>) с «заливкой» также не работает:

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

Помимо создания элемента <rect>, расположенного в том же месте - что-то, чего я хотел бы избежать - есть ли другой способ добиться этого?

Answer 1

Прямоугольник, вероятно, лучший способ сделать это (при условии, что вы имеете дело только с простейшими формами текста).

У tspans нет никакого «фона» в SVG 1.1, фон - это то, что окрашивается перед tspan. Есть много случаев, чтобы рассмотреть, например, когда tspan находится внутри textPath, который имеет форму круга. Также обратите внимание, что это не так просто, как непрерывный прямоугольник во всех случаях, один tspan может быть перекошен, повернут и разделен на несколько пересекающихся и непересекающихся фигур из-за преобразований, позиционирования глифа и т. Д.

Есть еще один способ, которым я могу придумать, это сделать это без сценариев, но тогда вам нужно будет заранее знать ширину строки (например, используя моноширинный шрифт). Если у вас это есть, вы можете добавить еще один элемент tspan, используя шрифт Ahem, поместив его перед другим tspan в документе и присвоив ему ту же позицию x, y, что и для tspan, который вы хотите задать «background».

В противном случае это можно сделать с помощью сценариев и добавления прямоугольников (или tspans с Ahem-подобным шрифтом).

Answer 2

SVG не поддерживает непосредственное указание цвета фона изображения ... но вы можете настроить четыре значения атрибута viewBox (сложный).Я знаю, что этого вы хотите избежать, но CSS не поможет вам.

... или вы можете использовать getBBox и getCTM ... это даст вам преимущества для повернутого текста.ПРИМЕР: http://srufaculty.sru.edu/david.dailey/svg/getCTM.svg