Преобразование svg текста в fabri c изображение

Question

Я написал svg строку для рисования текста в форме ar c с пользовательскими шрифтами, как указано ниже.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" width="581.6" height="689.6">
    <defs>
        <filter id="shadow">
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blurred"/>
            <feOffset in="blurred" dx="3" dy="3" result="shadow"/>
            <feMerge>
                <feMergeNode in="shadow"/>
            </feMerge>
        </filter>
        <path id="arc_circle" d="M 236.8 290.8 a 54 54 0 1 1 108 0 a 54 54 0 1 1 -108 0" />
        <style type="text/css">      
           @font-face {
             font-family: "LinotypeZapfino"; 
             src: url('./fonts/LinotypeZapfino.ttf');
           }     
      </style>
    </defs>
    <g font-family="LinotypeZapfino" font-size="100">
        <use xlink:href="#arc_circle" fill="none" stroke="none" />
        <text fill="#000000">
            <textPath xlink:href="#arc_circle" startOffset="0" style="">TEST</textPath>
        </text>
    </g>
</svg>

Когда я сохраняю это .svg, я получаю текст с указанным шрифтом в круглой форме.

Но при попытке отобразить то же самое в теге изображения пользовательский шрифт не применяется. Используя этот элемент изображения, я создавал fabri c image.

const blob = new Blob([svg], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
let image = document.createElement('img');
document.body.appendChild(image);
image.src = url;

Plz, помогите мне в решении этой проблемы.