Цвет фона элемента 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> 

Я попытался «заполнить» атрибут, но это, кажется, затрагивает заполнения (цвет) текста, а не области позади нее:

<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

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

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

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

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

Answer 2

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

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