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

Question

这是 SVG 元素的示例。双击我想获取文本内容以在文本区域中显示它。但在我的尝试中，这取决于用户点击的确切位置：当用户点击一个行元素时，我只得到一行，如果用户点击的不是一行，我得到一个空值（但是仍在 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

使用 JointJS 的 dblclick 事件（因为它是图表编辑器的一部分）

'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

as content 如果用户双击 g 元素中的某处，则在文本区域中显示它。

Answer 1

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

Answer 2

假设您将文本存储在属性（应该是这种情况）或属性中，最好这样做：

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

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

Getting text elements of svg by dblclick event

javascript

svg

jointjs