通过dblclick事件获取svg的文本元素

这是SVG元素的示例。通过双击，我想让文本内容在textarea中显示。但在我的尝试中，它取决于用户点击的excact位置：当用户点击一个线元素时，我只得到一行，如果用户点击不完全在一行上，我会得到一个空值但仍在g元素的内部）。通过dblclick事件获取svg的文本元素

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>

使用JointJS（因为它是一个图编辑器的一部分）

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

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

所以我需要的是

DblClick事件

Line 1 
Line 2 
Line 3

as content如果用户正在双击g元素中的某处，则在textarea中显示此项。

来源

2015-10-23 user3142695

假设你有存储在一个属性（这应该是这种情况）的文本或属性，这是更好地做一些事情，如：

'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(); 
},

来源

2015-10-23 14:15:22 dave

尝试使用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(); 
},

来源

2015-10-23 11:24:15 AmmarCSE

通过dblclick事件获取svg的文本元素

回答

相关问题