При загрузке svg на полотне на js нет круговых фигур - PullRequest
Новая
       22

При загрузке svg на полотне на js нет круговых фигур

0 голосов
/ 05 декабря 2018

Я использую ткань JS для загрузки SVG на холсте.Элемент SVG - это таблица, отображающая различную информацию о холсте.Таблица содержит несколько элементов, из которых элементы круга и линии.

Моя проблема в том, что линии отображаются правильно, однако круги не отображаются вообще.

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

При загрузке svg я использую старый добрый fabric.loadSVGFromString, удар является примером того, как выполняется загрузка svg на холсте: 

fabric.loadSVGFromString(options.svgLegend, function (results, renderOptions) {
      var obj = fabric.util.groupSVGElements(results, renderOptions);                
      annotationManager.canvas.add(obj);
      annotationManager.canvas.renderAll();
});

После

Нижепример сгенерированного SVG: 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin">
<title>Legend</title>
<g x="0" font-family="Helvetica, Arial, sans-serif" font-size="18px" font-weight="bold" text-anchor="start">
    <text x="0" dy="1em">Style</text>
    <text id="sortLegendEstimator" x="175" dy="1em">Author</text>
    <text id="sortLegendType" x="350" dy="1em">Type</text>
    <text id="sortLegendQuantity" x="525" dy="1em">Quantity</text>
    <text id="sortLegendDescription" x="700" dy="1em">Description</text>
</g>
<g x="0" y="20" font-size="18px" text-anchor="start">
    <svg>
        <circle xmlns="http://www.w3.org/2000/svg" cx="10" cy="40" r="25" strokeWidth="4" stroke="#ff887c" fill="#000000" />
    </svg>
    <svg>
        <line xmlns="http://www.w3.org/2000/svg" x="40" y="40" strokeWidth="4" stroke="#ff887c" strokeDashArray="undefined" />
    </svg>
    <text x="175" dy="1.5em">xxxxxxx</text>
    <text x="350" dy="1.5em">connected line</text>
    <text x="525" dy="1.5em">266.28 ft</text>
    <g x="700" dy="1.5em">
        <text x="700" y="20" text-anchor="start">Babilonia, și în special capitala sa, orașul Babilon, au fost pentru mult timp u</text>
    </g>
</g>
<g x="0" y="50" font-size="18px" text-anchor="start">
    <svg>
        <circle xmlns="http://www.w3.org/2000/svg" cx="10" cy="70" r="25" strokeWidth="4" stroke="#ff887c" fill="#000000" />
    </svg>
    <text x="175" dy="1.5em">xxxxxxx</text>
    <text x="350" dy="1.5em">point group</text>
    <text x="525" dy="1.5em">3</text>
</g>
<g x="0" y="80" font-size="18px" text-anchor="start">
    <svg>
        <circle xmlns="http://www.w3.org/2000/svg" cx="10" cy="100" r="25" strokeWidth="4" stroke="#ff887c" fill="#000000" />
    </svg>
    <svg>
        <line xmlns="http://www.w3.org/2000/svg" x="40" y="100" strokeWidth="4" stroke="#ff887c" strokeDashArray="undefined" />
    </svg>
    <text x="175" dy="1.5em">xxxxxxx</text>
    <text x="350" dy="1.5em">connected line</text>
    <text x="525" dy="1.5em">67.03 ft</text>
</g>
<g x="0" y="110" font-size="18px" text-anchor="start">
    <svg>
        <circle xmlns="http://www.w3.org/2000/svg" cx="10" cy="130" r="25" strokeWidth="12" stroke="#dc2127" fill="#000000" />
    </svg>
    <svg>
        <line xmlns="http://www.w3.org/2000/svg" x="40" y="130" strokeWidth="12" stroke="#dc2127" strokeDashArray="undefined" />
    </svg>
    <text x="175" dy="1.5em">xxxxxxx</text>
    <text x="350" dy="1.5em">connected line</text>
    <text x="525" dy="1.5em">87.53 ft</text>
</g>
<g x="0" y="140" font-size="18px" text-anchor="start">
    <svg>
        <circle xmlns="http://www.w3.org/2000/svg" cx="10" cy="160" r="25" strokeWidth="4" stroke="#ff887c" fill="#000000" />
    </svg>
    <svg>
        <line xmlns="http://www.w3.org/2000/svg" x="40" y="160" strokeWidth="4" stroke="#ff887c" strokeDashArray="undefined" />
    </svg>
    <text x="175" dy="1.5em">xxxxxxx</text>
    <text x="350" dy="1.5em">connected line</text>
    <text x="525" dy="1.5em">97.2 ft</text>
</g>

К настоящему времени я попробовал почти все, кроме.Отбрасывание SVG не является выбором, так как оно позволяет матрице обрабатывать большую часть функциональности, необходимой для него (перетаскивание, изменение размера и т. Д.), Svg - это в основном легенда таблицы.Любая помощь приветствуется.

1 Ответ

0 голосов
/ 06 декабря 2018

Решено!

Проблема заключалась в том, что фабрика загружала фигуры SVG с шириной 0 по умолчанию.Решил это путем явной установки ширины круга к его радиусу, как показано ниже: 

fabric.loadSVGFromString(options.svgLegend, function (results, renderOptions) {

            results.filter(function(obj){ if(obj.type === 'circle'){ obj.width = obj.radius; } });

ПРИМЕЧАНИЕ. Я заметил, что линии не были построены правильно (с координатами x и y вместо x1, x2, y1, y2),но это не было причиной моей проблемы.

...