SVG не занимает всю ширину контейнера div ⇐ CSS

[Anonymous]

Столкнулась с проблемой, когда SVG не занимает полную ширину родительского элемента div.
Я пробовал обновить viewBox и добавить атрибуты ширины и высоты в SVG, но ни один из подходов не сработал.
Мое требование:

• Я хочу, чтобы этот цвет SVG менялся динамически. -- ✔
• Я хочу, чтобы внутри этого SVG был динамический текст. -- ✔

Я уже выполнил эти задачи, как показано во фрагменте кода.
Я столкнулся с проблемой эти две проблемы,

• Мне нужен значок, например. значок карандаша, который должен быть расположен рядом с текстом в середине SVG. --
• Теперь самая большая проблема: SVG должен автоматически подстраиваться под ширину родительского div, как показано на прикрепленных изображениях. --

Изображение без текста и значка – маленький родительский элемент div




Изображение с текстом и значком – большой родительский элемент div



Я попробовал эту ссылку SO, но это не сработало - SVG не говорит о ПОЛНОЙ ширине ' контейнера

Код: Выделить всё

Updated SVG

Подробнее здесь: https://stackoverflow.com/questions/786 ... tainer-div