В SVG вы можете автоматизировать процесс размещения текста внутри фигуры, используя текстовые элементы и атрибуты, такие как `textPath`. Этот метод позволяет тексту следовать по заданной форме (например, контуру фигуры).
Вот пример, как это можно сделать в SVG:
```html
<svg width="400" height="200">
<defs>
<path id="url" d="M 10,80 C 50,10 100,10 130,80 S 210,150 250,80" fill="none" />
</defs>
<text fill="black" font-size="20">
<textPath href="#url">
Здесь ваш текст, который будет следовать по контуру фигуры.
</textPath>
</text>
</svg>
```
В этом коде:
- Мы определили путь (`<path>`), по которому будет следовать текст, с `id="url"`.
- Затем, используя элемент `<textPath>`, связываем текст с указанным путем.
Эта конструкция позволяет тексту принимать форму фигуры. Вы можете изменять атрибуты пути, чтобы экспериментировать с различными формами.
### Использование `shape-outside`
Если же вы хотите использовать CSS, например, `shape-outside`, то это свойство работает только в контексте обычного HTML и назначения текста с помощью CSS. Обычно оно применяется для вытеснения текста вокруг не прямоугольных фигур, таких как изображения и плавные границы.
Пример использования `shape-outside` в CSS:
```html
<style>
.shape {
float: left;
shape-outside: url('path.svg') 8% 8%;
width: 200px;
height: 200px;
clip-path: url('path.svg'); /* задаем обрезку для элемента */
}
</style>
<div class="shape"></div>
<p>
Ваш текст здесь, который будет обтекать фигуру, определённую с помощью shape-outside.
</p>
```
Однако реализовать точный эффект, как на вашем примере с SVG, с использованием только `shape-outside` может быть сложнее, так как поддержка этого свойства может варьироваться в разных браузерах. Лучше всего для сложных фигур использовать SVG, как показано выше.