Блог

Я использую fabric.js в моем заявлении.

Я экспортирую холст и любые объекты на нем в SVG. SVG выглядит так:

 <?xml version="1.0" encoding="UTF-8" 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" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="400" viewBox="0 0 400 400" xml:space="preserve">
<desc>Created with Fabric.js 4.1.0</desc>
<defs>
</defs>
<g transform="matrix(0.89 -0.45 0.45 0.89 126 108)"  >
    <image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"  xlink:href="http://localhost:53377/ImageHandler.ashx?CaseID=2amp;ImageID=88amp;RotationAngle=30amp;ImagePath=/Case16/9-1.png" x="-23.5" y="-31.5" width="47" height="63"></image>
</g>
<g transform="matrix(0.89 -0.45 0.45 0.89 262 142)"  >
    <image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"  xlink:href="http://localhost:53377/ImageHandler.ashx?CaseID=2amp;ImageID=88amp;RotationAngle=30amp;ImagePath=/Case16/9-1.png" x="-23.5" y="-31.5" width="47" height="63"></image>
</g>
</svg>
 

Затем пытаюсь загрузить SVG следующим образом:

 fabric.loadSVGFromString("...SVG...", function (objects, options) {
                var obj = fabric.util.groupSVGElements(objects, options);
                canvasZoomer.add(obj).renderAll();
});
 

Проблема в том, что изображения не загружаются, если вы заметили, что в моем SVG также есть множество изображений с их путями.

Пожалуйста, обратите внимание, что в моем случае оба изображения изначально загружаются из пользовательских классов, поэтому не уверен, имеют ли они какое-либо отношение к этому.

Любая помощь здесь будет высоко оценена.