Cannot insert svg in path connection of dia.Link

This issue has been tracked since 2021-10-26.

With the documentation : https://resources.jointjs.com/docs/jointjs/v3.4/joint.html#dia.Link,

Using a custom link : joint.dia.Link, we can not change the SVG of the path connection (the link body).

kumilingus wrote this answer on 2021-10-26

Could you please elaborate? What code are you trying to run?

vanfrancoisle wrote this answer on 2021-10-26

Here is the code, we can add the svg code at the beginning and at the end of the link but I want to put the svg code in the center of the link (see below).

var svgFile = [    
    '<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg">',
    '<g>',
    '<line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="41.5" x2="80" y1="42" x1="0" stroke="#000" fill="none"/>',
    '<path id="svg_6" d="m59.5,53.5" opacity="undefined" stroke-linecap="undefined" stroke-linejoin="undefined" stroke="#000" fill="none"/>',
    '<path id="svg_10" d="m28.3525,38.02409l7.63938,0l2.36063,-7.63934l2.36063,7.63934l7.63937,0l-6.18037,4.72132l2.36075,7.63934l-6.18038,-4.72145l-6.18037,4.72145l2.36075,-7.63934l-6.18037,-4.72132z" stroke="#000" fill="none"/>',
    '</g>',
    '</svg>'
].join('');

 const Link = joint.dia.Link.define('fml.Link', {
    markup: [
        '<path class="connection"/>',
        '<path class="marker-source"/>',
        '<path class="marker-target"/>',
        '<path class="connection-wrap"/>',
        '<g class="labels" />',
        '<g class="marker-vertices"/>',
        '<g class="marker-arrowheads"/>',
        '<g class="link-tools" />'
    ].join(''),
    attrs: {
        '.connection': {
            stroke: 'black',
            strokeWidth: 1,
            fill: 'none',
            'stroke-dasharray': '',
            'stroke-width': 1
        },
        '.marker-arrowheads': { 'fill-opacity': 0 }, // Hide arrows on link tool
        '.marker-vertices circle': { r: 5 }, // radius of the vertex on link tool
        '.connection-wrap': { fill: 'none' }
    },
    smooth: true
});

var link = new Link();
link.attr({
    '.connection': {
        'sourceMarker': {
            'type': 'image',
            "xlink:href": 'data:image/svg+xml;utf8,' + encodeURIComponent(svgFile),
            y: -28,
            x: -40
        },
        'targetMarker': {
            'type': 'image',
            "xlink:href": 'data:image/svg+xml;utf8,' + encodeURIComponent(svgFile),
            y: -28,
            x: -40
        }
    }
});
link.source(new g.Point(50, 100));
link.target(new g.Point(250, 100));
link.addTo(graph);

In the documentation, it is written that

.connection is the actual line of the link.

So, I want to insert the svg code in the center of the link as for the beginning or end of the link.
[Do not work]

link.attr({
    '.connection': {
        'type': 'image',
        "xlink:href": 'data:image/svg+xml;utf8,' + encodeURIComponent(svgFile)
    }
});

I have already tried to add a path class="image" in the markup to insert svg as mentioned in the following link without success :
https://stackoverflow.com/questions/40934524/jointjs-add-svg-to-the-center-of-a-link.

kumilingus wrote this answer on 2021-10-27

To position and auto-rotate an SVGElement on the connection path use atConnectionRatio attribute.

var svgFile = [
    '<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg">',
    '<g>',
    '<line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="41.5" x2="80" y1="42" x1="0" stroke="#000" fill="none"/>',
    '<path id="svg_6" d="m59.5,53.5" opacity="undefined" stroke-linecap="undefined" stroke-linejoin="undefined" stroke="#000" fill="none"/>',
    '<path id="svg_10" d="m28.3525,38.02409l7.63938,0l2.36063,-7.63934l2.36063,7.63934l7.63937,0l-6.18037,4.72132l2.36075,7.63934l-6.18038,-4.72145l-6.18037,4.72145l2.36075,-7.63934l-6.18037,-4.72132z" stroke="#000" fill="none"/>',
    '</g>',
    '</svg>'
].join('');

const Link = joint.dia.Link.define('fml.Link', {
    markup: [
        '<path class="connection"/>',
        '<path class="marker-source"/>',
        '<path class="marker-target"/>',
        '<path class="connection-wrap"/>',
        '<g class="labels" />',
        '<image class="my-image" />', // An image to display the custom SVG file (or insert the SVG itself)
        '<g class="marker-vertices"/>',
        '<g class="marker-arrowheads"/>',
        '<g class="link-tools" />'
    ].join(''),
    attrs: {
        '.connection': {
            stroke: 'black',
            strokeWidth: 1,
            fill: 'none',
            'stroke-dasharray': '',
            'stroke-width': 1
        },
        '.marker-arrowheads': { 'fill-opacity': 0 }, // Hide arrows on link tool
        '.marker-vertices circle': { r: 5 }, // radius of the vertex on link tool
        '.connection-wrap': { fill: 'none' }
    },
    smooth: true
});

var link = new Link();
link.attr({
    '.my-image': {
        atConnectionRatio: 0.5,
        y: -28,
        x: -40,
        'xlink:href': 'data:image/svg+xml;utf8,' + encodeURIComponent(svgFile),
    }
});

link.source(new g.Point(50, 100));
link.target(new g.Point(250, 100));
link.addTo(graph);
vanfrancoisle wrote this answer on 2021-10-27

Thank you very much !

Is it possible to put the svg file in the background, behind the link ?
To not click on the svg and click on the link when they are superimposed.
link with svg
For example, to bend or manipulate the link :
bend link svg

kumilingus wrote this answer on 2021-10-27

The order of SVGElements matters.

  markup: [
        '<image class="my-image" />', // An image to display the custom SVG file (or insert the SVG itself)
        '<path class="connection"/>',
        '<path class="marker-source"/>',
        '<path class="marker-target"/>',
        '<path class="connection-wrap"/>',
        '<g class="labels" />',
        '<g class="marker-vertices"/>',
        '<g class="marker-arrowheads"/>',
        '<g class="link-tools" />'
    ].join(''),
vanfrancoisle wrote this answer on 2021-10-27

Thank you for your help and your prompt response !

More Details About Repo
Owner Name clientIO
Repo Name joint
Full Name clientIO/joint
Language JavaScript
Created Date 2009-09-11
Updated Date 2022-12-06
Star Count 3717
Watcher Count 155
Fork Count 817
Issue Count 53

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date