Вставка svg в html через js

<svg viewbox="0 0 260 36">
   <foreignobject>
     <div>Текст</div>
   </foreignobject>
</svg>

Трудность в том, что если svg изначально находится в html документы, то все элементы html в блоке foreignobject, адаптируются под ширину, то есть масштабируются.

Если же svg вставлять из js, путем добавления узлов. То все то, что в блоке foreignobject, принимает высоту в 36, по моему и блок svg имеет высоту 36, под viewbox.

Тогда когда сама ширина в %, и содержимое должно быть в масштабе, но этого не происходит, в чем может быть дело?