Как выбрать курсором текст SVG / d3.js, как обычный текст HTML или любой другой текстовый редактор?

Question

Я использую d3.js для рисования графа макета, подобного этому: https://bl.ocks.org/mbostock/950642

Но я обнаружил, что очень сложно скопировать и вставить метку узла.Возьмите приведенную выше ссылку в качестве примера, я не могу перетащить текст, чтобы выбрать любую последовательность.Я могу только дважды щелкнуть метку, чтобы выбрать определенную последовательность символов.

Если я попытаюсь выделить текст с помощью специального символа, такого как Mlle.Vaubois, я смогу выбрать только Mlle или Vaubois,Я не могу выбрать целую строку Mlle.Vaubois.(См. Рисунок ниже)

Более того, я не могу выбрать произвольную последовательность символов внутри этой строки.Например, я не могу выбрать две средние буквы: ll внутри Mlle.Vaubois.Подсветка прекращается сразу после выбора первого l.(См. Ниже:)

Я просто хочу иметь возможность выбирать любую последовательность, как я хочу, как в браузере.Например, я могу выбрать rce La из текста HTML: Labeled Force Layout, как показано ниже.Тогда я могу Ctrl + C и Ctrl + V, как я хочу.

Эта проблема не только для d3.js, потому что другой более общий SVGПример также имеет эту проблему: http://jsfiddle.net/wPYvS/

Я не знаю, почему SVG обрабатывает выделение текста так отличается от обычного текста HTML в браузере илилюбой основной текстовый редактор?Как это решить?Спасибо.

Answer 1

Следующий пример добавляет обработчик щелчка ко всем «узлам» (т. Е. class="node"), который будет выделять весь текст в узле.

var nodes = document.querySelectorAll(".node");

nodes.forEach( function(elem) {
  elem.addEventListener("click", nodeClickHandler);
});

function nodeClickHandler(evt) {
  var selection = document.getSelection();
  var range = selection.getRangeAt(0);
  range.selectNode(evt.target);
}

<svg width="500" height="200">
  <g class="node" transform="translate(275.4819543667187,131.9805407488932)">
    <image xlink:href="https://github.com/favicon.ico" x="-8" y="-8" width="16" height="16"> </image>
    <text dx="12" dy=".35em">Mlle.Vaubois</text>
  </g>
</svg>