Как написать текст по кругу в SVG?

Question

[Полина Емельянова]

Добрый день, коллеги.
Встала потребность в создании СВГ элемента (файла), где будет возможно менять содержание текстового контента.
Пример того, что необходимо реализовать

САБЖ:


Внутри этой плашки нужно будет иметь возможность заменить как название магазина, так и размер скидки.
Плашка НЕ АНИМИРОВАННАЯ! Никаких вызовов или скриптов не нужно.

ПРОБЛЕМА:
Не могу найти адекватного описания или реализации написания текста по кругу, как на скрине: арка сверху - арка снизу.
+ текст по середине

Прошу вас подсказать, как это сделать или дать наводку на туториал.

Заранее БЛАГОДАРЮ!

Answer 1

[lagudal]

так первая же ссылка в google дает исчерпывающий ответ
https://gist.github.com/yashaka/d25804de44b1ead810...
только там один текст и соотв-но один path, а в вашем случае надо подготовить 3 и каждому дать свой id.
textPath -ов тоже будет 3 - цепляете их соо-но и при необходимости меняеете тексты не изменяя путей.