Упростить, выровнять, сделать проще

.bl {
  width: 400px;
  background: red;
  height: 100px;
  position: relative;
}
.adv {
    width: 300px;
    position: absolute;
    right: 0;
    top: 10px;
    z-index: 1;
}

.adv .text {
    background: black;
    border-radius: 5px 0 0 5px;
    color: white;
    margin-left: auto;
    width: fit-content;
    font-size: 14px;
    padding: 10px;
    white-space: nowrap;
}

.adv foreignObject {
    height: 100%;
    width: 100%;
}

<div class='bl'>
  <svg viewBox='0 0 220 34'class='adv'>
    <foreignObject>
      <div class='text'>
        Текст текст
      </div> 
    </foreignObject>
  </svg>
</div>

Это удобно, задаем ширину svg в процентах и все что внутри адаптивное.

Вопрос в том, возможно ли цвет фона перенести на блок foreignObject, при этом сделать данный блок в ширину по контенту.

В примере ширина(viewBox) svg задана с запасом, а дочерний блок меньше по ширине и прижат к правому краю. Так получается, если текст будет шире или короче. Фон будет по ширине текста.

Собственно вопрос в том, возможно ли сделать тоже самое, но фон и адаптивную ширину фона перенести на родителя, то есть на foreignObject.

Единственная трудность, что изменить внутренние отступы у блока с классом text, необходимо фиксить параметр viewBox. Было бы круто, если это выполнить как нибудь проще и адаптивней.