svg { width: 100%; }
#par { width: 360px; height: 50%; padding: 6px; color: #ddd;
overflow: auto; border-radius: 6px; background: rgba(0,0,0,.6); }
#abza { width: 320px; padding: 6px; color: #266; border-radius: 6px; background: rgba(240, 220, 200, .8); }
#abz { width: 320px; padding: 6px; color: #822; border-radius: 6px; background: rgba(240, 240, 240, .8); }
#re {fill: #acc;}
polygon { fill: #088; }
#coda {x:50px; y:240px; width:340px; height:160px; padding: 6px;
border-radius: 6px; background: rgba(140, 140, 140, .8);}
<!-- Узнайте об этом коде на MDN:
https://developer.mozilla.org/ru/docs/Web/SVG/Элемент/foreignObject -->
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<polygon points="2,2 440,10 400,210 10,200" />
<!-- Типичный пример использования: встраивание HTML-текста в SVG -->
<foreignObject x="20" y="10" width="400" height="300">
<!-- В контексте SVG, внедренного в HTML, пространство имен XHTML может и следует избегать,
но это обязательно в контексте документа SVG -->
<div id="par" xmlns="http://www.w3.org/1999/xhtml">
<p id="abza"><i>
- Делись, хозяин, научи меня "стяжать",<br>
- Пались, как "лоха" объегоривать умело,<br>
И как на кол, взамен себя - других сажать,<br>
Но чтобы выглядело - будто бы "за дело"...<br>
</i></p><i>
Как, скорбь не имав, но ходить по головам,<br>
А подвернётся некий случай - и по трупам,<br>
И как суметь, придаша вес пустым словам -<br>
Буровить головы слепцов, аки шурупом...<br></i>
<p id="abz">
- Нет, всё не так, да и зачем перечислять...<br>
Един в трёх лицах он, "Хозяин-мегаполис",<br>
Его богатство, слава, власть и "реки вспять",<br>
Ещё - "идея", чтобы знать, "за что боролись".<br>
</p><i>
За сим - не дрейфь, доход разделим пополам,<br>
Накрыв иных - пусть деревянным, но прибором,<br>
Восславив - "Сейф",... - И да прогнётся Валаам<br>
И разнесёт ту весть по всем святым соборам...</i>
<p id="abz">
Решил слукавить на святынях? - Перебор...<br>
Лугов и пастбищ - зря хозяина порочишь,<br>
Тайги владельца, рек, полей, высоких гор,<br>
Он - мой. - Лепи своих, какими хочешь...
</p>
</div>
</foreignObject>
<rect id="re" x="20" y="220" width="400" height="200" rx="10"></rect>
<foreignObject id="coda">
<p id="abz">
- Смолчал хозяин, да и то, что мог сказать<br>
- Мне невдомёк, но во владениях чертога<br>
Поможет дом срубить да судьбы вам связать.<br>
Не веришь ежли - испроси у Бога...
</p>
<a href="https://developer.mozilla.org/ru/docs/Web/SVG/Элемент/foreignObject"
target="_blank">Узнайте об этом коде на MDN:</a>
</foreignObject>
</svg>
почему смещение текста в блоках <tspan> происходит не так как ожидалось?
--- А как ожидалось? Правь вопрос, опиши подробнее конечный желаемый результат...