Как добавить разметку внутрь svg графика?

Question

[Хороший Человек]

Добрый день.
Имеется donut chart созданный с помощью d3.js
Внутрь нужно вставить <span class="rouble">т</span> с подключаемым шрифтом для знака рубля и отцентрировать это дело.
Просто текст добавить могу, но когда нужно добавить html - начинаются проблемы.
То что я хочу вставить - вставляется, через devTools видно в разметке, но не отображается в документе.
Ссылка на исходники.
Спасибо за ваше время и помощь.

Answer 1

[Константин Китманов]

HTML внутри SVG — проблема. В данном случае просто замените span на tspan. Если нужна будет более сложная разметка, то придется мудрить с неймспейсами.
А вообще-то символ рубля можно и попроще в SVG сделать: https://css-tricks.com/svg-symbol-good-choice-icons/

Comments

[Хороший Человек]

Спасибо за ответ. Уже решаю задачу несколько иным способом.
Но столкнулся с проблемой центровки, не поможете?
codepen.io/ArtiSimonenko/pen/eZqeeZ?editors=0010
т.е. когда сумма большая - то цифры перекрывают знак рубля.
Может средствами d3 можно решить этот вопрос?

[Константин Китманов]

Хороший Человек: ну так сделайте, как я посоветовал, и не будет такой проблемы. Простое лучше сложного.

[Хороший Человек]

Константин Китманов: как? Вы имеете ввиду нарисовать знак?

[Константин Китманов]

Хороший Человек: нет, просто заменить span на tspan.

[Хороший Человек]

Я пробовал.
Нет никакого результата. Просто ничего не выводит

[Константин Китманов]

Хороший Человек: не стыдно вам, сударь, пожилому человеку в лицо врать? codepen.io/hogart/pen/ONKzBX?editors=0010

[Хороший Человек]

Константин Китманов: И в правду моя вина. Спасибо.

[Константин Китманов]

Хороший Человек: я тоже страдаю от невнимательности:)

Answer 2

[GreatRash]

HTML вставляется в SVG через foreignObject, но IE не его не поддерживает. Иных способов запихать внутрь HTML нет.