#javascript #fabricjs
#javascript #fabricjs
Вопрос:
Я использую 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 также есть множество изображений с их путями.
Пожалуйста, обратите внимание, что в моем случае оба изображения изначально загружаются из пользовательских классов, поэтому не уверен, имеют ли они какое-либо отношение к этому.
Любая помощь здесь будет высоко оценена.
Комментарии:
1. Вы пытаетесь загрузить SVG-файл из другого места, чем вы его экспортировали (т. Е. Все
xlink:href
еще действует там, где вы импортируете SVG)?2. Нет. Ссылка href, упомянутая в xlink, доступна в том же приложении. то есть, если вы поместите эту ссылку href в браузер, она отобразит изображение в браузере.
3. кроме того, я не вижу никаких запросов к этому URL-адресу при применении SVG
4. Может быть проблема с отсутствием TLS. Если я заменю URL-адрес на TLS ( picsum.photos / 200 / 300 ), он будет работать, но не на TLS ( placehold.it/120x120amp;text=image1 ) выдает ошибки. Вы получаете какие-либо ошибки в консоли?
5. Нет, я не получаю никаких ошибок на консоли. Кроме того, должен ли иметь значение TLS, если я занимаюсь разработкой на локальном хосте?