How do I float it on top of an image and express several text labels?

[james-ep01]

Introduction

I inherited the image and am using it.
myobject use joint.shapes.standard.Image.extend({...

Of course, one text is allowed, but you have to express multiple texts in the specified location on the image. Sometimes you have to edit it, but how do you express multiple texts on an image object?

For editing, edit as below.

Thank you.

Steps to reproduce

No response

Restrictions & Constraints

No response

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

JointJS+

[kumilingus]

You can add as many <text/> elements to your markup as you need.
See https://docs.jointjs.com/learn/features/shapes/custom-shapes/#how-can-i-give-multiple-labels-to-an-element

[james-ep01]

I saw the example of the url above.

And I tried it as below, but there are several texts, but this time there is no svg image, why is that?
Just image href works well without markup.
body's href, xlink:href all fail to display svg image.

// Add as many elements markup .
markup: joint.util.svg/* xml */ <image @selector="body" /> <text @selector="label" /> <text @selector="label1" /> <text @selector="label2" />,

// and update my object body

attrs: {
image: {
href: data:image/svg+xml;utf8,${encodeURIComponent(sgvfile)}
},
body: {
width: 'calc(w)',
height: 'calc(h)',
//href: data:image/svg+xml;utf8,${encodeURIComponent(sgvfile)}
//'xlink:href': 'data:image/svg+xml;utf8,' + encodeURIComponent(sgvfile),
'xlink:href': data:image/svg+xml;utf8,${encodeURIComponent(sgvfile)} ,
},
label: {
x: 'calc(w / 2)', y: 'calc(h+30)' , text: "label 1 ", fontSize: 12, fill: '#8f8f8f'
},
label1: {
x: 'calc(w / 2)',
y: 'calc(h / 2 + 5)',
fontSize: 20,
textAnchor: 'middle',
textVerticalAnchor: 'bottom',
text: 'Label 2',
fill: '#C94A46',
},
label2: {
x: 'calc(w / 2)',
y: 'calc(h / 2 + 10)',
fontSize: 14,
textAnchor: 'middle',
textVerticalAnchor: 'top',
fill: '#C94A46'
},
................................

body's href, xlink:href all fail to display svg image.
Just image href works well without markup.

Can't I put the label in and position it? And do I have to use markup?