Получение текстовых элементов svg по событию dblclick

Question

Это пример элемента SVG. С помощью doubleclick я хочу, чтобы текстовое содержимое отображалось в текстовом поле. Но в моей попытке это зависит от места, где пользователь нажимает: я получаю только одну строку, когда пользователь нажимает на элемент линии, и я получаю пустое значение, если пользователь нажимает не точно на строку (но все еще внутри g-элемента).

SVG

<g id="j_7" model-id="15449af1-b873-4d0f-92da-ca064c322b77"> 

    <rect id="v-41"></rect> 

    <text id="v-46" y="0.8em" display="null" xml:space="preserve"> 
     <tspan id="v-139" class="line">Line 1</tspan> 
     <tspan id="v-140" class="line">Line 2</tspan> 
     <tspan id="v-141" class="line">Line 3</tspan> 
    </text> 
</g> 

JS

DblClick событие, используя JointJS (как это является частью диаграммы-редактора)

'cell:pointerdblclick': function(cellView, event, x, y){ 
    var content = event.target.innerHTML; 

     $('#target').prepend('<textarea id="overlay">' + content + '</textarea>'); 
     $('#overlay').focus().select();     
}, 

Так что мне нужно

Line 1 
Line 2 
Line 3 

как content, чтобы отобразить это в текстовом поле, если пользователь дважды щелкнул где-нибудь в g-элементе.

Answer 1

Если у вас есть текст, хранящийся в свойстве (которое должно быть) или атрибут, это лучше сделать что-то вроде:

'cell:pointerdblclick': function(cellView, event, x, y) { 
    var content = cellView.model.get('mytext'); // in case the text is in a property 
    var content = cellView.model.attr('text/text') // in case the text is in an attribute 

    $('#target').prepend('<textarea id="overlay">' + content + '</textarea>'); 
    $('#overlay').focus().select(); 
}, 

Answer 2

Попробуйте использовать JQuery для извлечения текста

'cell:pointerdblclick': function(cellView, event, x, y) { 
    var content = cellView.$el.find('tspan').map(function() { 
     return $(this).text(); 
    }).get().join("\n"); 

    $('#target').prepend('<textarea id="overlay">' + content + '</textarea>'); 
    $('#overlay').focus().select(); 
},