Выбор текстового элемента с помощью SVG.js
Я использую библиотеку SVG.js и svg.select.js для управления объектами svg, у меня проблемы с выбором текстовых элементов, как вы можете видеть в этом пример. С эллипсом проблем нет, но при попытке выделить текст появляется сообщение об ошибке: «Uncaught TypeError: this.parent.group не является функцией» Это мой код:
var draw = SVG('drawing')
var selectedelement;
var g = draw.group();
text = g.text('Perepepeeeee');
var myEllipse = g.ellipse(50, 50);
myEllipse.move(200, 0);
g.on("click", function (event) {
if (selectedelement!=null)
selectedelement.selectize(false, { deepSelect: true });
selectedelement=SVG.get(event.target.id).selectize({ deepSelect: true })
});
Где я не прав?
Хорошо, проблема заключалась в том, что элемент, соответствующий event.target.id, был tspan внутри текста, поэтому parent (). Group () в svg.select.js выдал ошибку. [Таким образом, похоже, это работает: selectedelement = SVG.get (event.target.id) .parent (). Selectize ()]. Спасибо за вашу помощь :)
Фактически нет необходимости в SVG.get элемента в обработчике. Потому что контекст this в обработчике привязан к группе. Не нужно фантазировать
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы получаете доступ к event.target.id в своем обработчике событий. Свойство target всегда указывает на узел, на котором было вызвано событие. В вашем случае это tspan. Однако вам нужен текст.
svg.js вызывает обработчик в контексте элемента, к которому он был привязан.
Таким образом, вы можете просто использовать this для получения группы и поиска оттуда текстового элемента:
g.on("click", function (event) {
if (selectedelement!=null)
selectedelement.selectize(false, { deepSelect: true });
selectedelement = this.select('text').first().selectize({ deepSelect: true })
});
Однако лучшим способом было бы привязать событие щелчка к тексту в первую очередь, чтобы вам не нужно было проходить через dom
text.on("click", function (event) {
if (selectedelement!=null)
selectedelement.selectize(false, { deepSelect: true });
selectedelement = this.selectize({ deepSelect: true })
});
Да, верно! Я принял это решение, потому что в группе у меня могут быть другие элементы, которые я все еще хочу выбрать (например, эллипс) ... но я думаю, что вы правы, что это не особенно элегантно: /
Когда вы найдете этот ответ подходящим, вы можете выбрать его в качестве ответа, чтобы люди могли видеть, что на этот вопрос был дан ответ.
Вы используете
event.target.id. У вашей группы есть идентификатор? Потому что вы его никогда не устанавливали. Кроме того, вы должны выбрать группу, а не текст внутри.