Ports on custom SVG

[Genti13]

Introduction

How do I configure ports that are "already made" in an svg so that they work after instantiating an object?
For example, I got the following SVG and I want to have pipeBody and pipeEnd to be ports but when I instanciate the object It generates a new g element:

<g id="v-60" transform="matrix(1,0,0,1,50,60)">

            <g id="v-61" magnet-selector="pipeEnd">
                <rect @selector="pipeBody" id="v-68" width="45" height="15" y="30" x="-50"
                    fill="red"></rect>

                <rect @selector="pipeEnd" id="v-69" width="10" height="25" y="25" stroke="gray" stroke-width="3"
                    fill="white" x="-50"></rect>
            </g>

</g>

<g>
MORE SVG HERE
</g>

The code I have for the object creation:

const templateImage = new DinamicElement(
    customSVG,
    {
        position: { x: 500, y: 300 },
        size: {
            width: 200,
            height: 300
        },
        attrs: {
            label: {
                text: "This is a text",
                fontSize: 10
            }
        },
        ports: {
         
            items: [
                {
                    id: "this_is_the_port",
                    z: 1,
                    attrs: {
                        x: 30
                    }
                }
            ]
        }
    });

The code I have for the link:

const OBJ1_TO_OBJ2= new Pipe({

    source: {
        id: templateImage.id,
        port: "thisisport", anchor: { name: "left" },
        connectionPoint: { name: "anchor" }
    },
    target: {
        id: PUMP.id,
        port: "left", anchor: { name: "left" },
        connectionPoint: { name: "anchor" }
    }
})

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

Does this example help? https://www.jointjs.com/demos/element-port-and-link-label-markup