Fabric.js SVG без контура не загружается - PullRequest
Новая
       8

Fabric.js SVG без контура не загружается

0 голосов
/ 01 сентября 2018

У меня проблемы с загрузкой SVG-файлов с помощью fabric.js версии 2.3.5. Кажется, что вы не можете импортировать фигуры без контура. Смотрите пример ниже. Раньше он работал нормально в fabric.js версии 1.7.22, но не работает с версией 2.0.0 и выше. Это намеренно или проблема (ошибка)? Или мне нужно изменить код JavaScript (см. Ниже)?

SVG с контуром (импорт работает с тканью 2.3.5) 

<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs/>
  <g>
    <path stroke="none" fill="#808080" d="M120 80 L120 160 40 160 40 80 120 80"/>
    <path fill="none" stroke="#ff0000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M120 80 L120 160 40 160 40 80 120 80"/>
  </g>
</svg>

svg без контура (импорт работает с тканью 1.7.22, но не с 2.0.0 и выше) 

<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs/>
  <g>
    <path stroke="none" fill="#808080" d="M120 80 L120 160 40 160 40 80 120 80"/>
  </g>
</svg>

Javascript: 

var load_imgs=function() {
    fabric.loadSVGFromURL('mySvg.svg', function (objects, options) {
        var obj = fabric.util.groupSVGElements(objects, options);  
        var logo = new fabric.Group(obj.getObjects(), {
            left:20,
            top: 10,
            originX: 'left', 
            originY: 'top'
        });
       logo.scaleToHeight(50);      
       canvas.add(logo);
    });
}();

1 Ответ

0 голосов
/ 07 октября 2018

Через некоторое время я случайно обнаружил, что groupSVGElements больше не действителен или не нужен. Итак, правильный рабочий код: 

var load_imgs=function() {
    fabric.loadSVGFromURL('mySvg.svg', function (objects, options) {
        var logo = new fabric.Group(objects, {
            left:20,
            top: 10,
            originX: 'left', 
            originY: 'top'
        });
       logo.scaleToHeight(50);      
       canvas.add(logo);
    });
}();
...