loadSVGFromString cannot show defs

[lzruio]

I tried to import an SVG using Fabric.js, and while the elements in the SVG are displayed, the RectStartArrow_ defined in the is not displayed correctly. How can I solve this problem? Below is a simple example of my code.

import * as fabric from 'fabric'

const canvas = new fabric.Canvas('myCanvas');

const svgString = <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <defs> <marker id="RectStartArrow_" refX="5" refY="6" orient="auto" markerWidth="10" markerHeight="10"> <path d="M5 0 L5 6 L5 12 L5 6 L2 12 L8 0" fill="red" /> </marker> <marker id="RectEndArrow_" refX="5" refY="6" orient="auto" markerWidth="10" markerHeight="10"> <path d="M5 0 L5 6 L5 12 L5 6 L8 12 L2 0" fill="red" /> </marker> </defs> <line x1="10" y1="10" x2="190" y2="10" stroke="#000" strokeWidth="2" markerStart="url(#RectStartArrow_)" markerEnd="url(#RectEndArrow_)" /> </svg>;

async function loadSvg(dataText) {
if (!dataText) {
return;
}

const { objects, options } = await fabric.loadSVGFromString(dataText);

const group = fabric.util.groupSVGElements(objects, options);

// 添加到 Canvas
canvas.add(group);
canvas.renderAll();

}

loadSvg(svgString);

[asturur]

I do not think we support markerEnd and markerStart. What are those? do you have reference to SVG specs that talk about those?

[lzruio]

They are reusable elements defined in the section of the SVG. Then we can reference these elements repeatedly in the line, and they will be displayed on the line.
If Fabric.js does not support these referenced elements, should I replace all the referenced elements with the actual paths?

[asturur]

No.
You should find the specs for markerEnd and the others marker and let's see if we can support them