SVG изогнутый текст вдоль элемента пути клипа круга не отображается

Question

Вот ссылка на мой кодовый блок: https://codepen.io/Bryandbronstein/pen/QVaQpa

Итак, в основном у меня есть svg circle, установленный как элемент clipPath, чтобы вырезать мое изображение в круг. Затем я хочу изогнуть свой текст по кругу, а не по прямой линии поверх моего круглого изображения, например:

изображение с изогнутым текстом

Дело в том, что у меня есть это изображение, чтобы показать его в качестве примера, потому что этот код работает в Firefox, но ни один другой браузер я не смог протестировать. Что дает? Вот мой код:

        <svg height="300" width="350">
        <defs>
            <clipPath id="circleView">
                <circle id="curve" cx="150" cy="180" r="110" fill="transparent" />
            </clipPath>
        </defs> 

        <text x="390" y="-20" width="100">
            <textpath id="homepageText" xlink:href="#curve">
                My Homepage!
            </textpath>
        </text>

        <image width="300" height="410" xlink:href="meee.jpg" clip-path="url(#circleView)" />

    </svg>

Просто чтобы прояснить, я имею умеренный опыт работы с HTML и CSS, но очень мало в SVG. Спасибо!

Answer 1

Используя svg path tag, мы можем получить изогнутый текст. Ниже приведена модификация вашего кода. Исправлены x и y для текстового тега и добавлен путь с идентификатором "forText.

<svg height="300" width="350">
        <defs>
            <clipPath id="circleView">
                <circle id="curve" cx="150" cy="180" r="110" fill="transparent" />
            </clipPath>
        </defs> 
        <path id="forText" d="M32,110, C25,90, 180,-39,290,130" stroke="" fill="none"/>
            <text x="0" y="35" width="100">
                <textpath xlink:href="#forText">
                    My Homepage!
                </textpath>
            </text>
    <image width="300" height="410" xlink:href="meee.jpg" clip-path="url(#circleView)" />
</svg>

Answer 2

Используйте path вместо circle и text-anchor + startOffset для центрирования текста:

<svg x="0px" y="0px" width="350" height="300" viewBox="0 0 350 300">
  <defs>
    <path id="curve" d="M40,180c0-60.751,49.248-110,110-110c60.751,0,110,49.249,110,110"/>
  </defs>
  <text fill="black" class="curved-text">
    <textPath xlink:href="#curve" text-anchor="middle" startOffset="50%">My homepage!</textPath>
  </text>
</svg>

Рабочая Codepen .