Выбор элемента Text с помощью SVG.js - PullRequest
Новая
       51

Выбор элемента Text с помощью SVG.js

0 голосов
/ 13 июня 2018

Я использую библиотеки 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 })
});

Где яЯ не прав?

1 Ответ

0 голосов
/ 13 июня 2018

Вы получаете доступ к 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 })
});

Тем не менее, лучшим способом было бы привязать событие click к тексту на первом месте, чтобывам не нужно проходить через дом 

text.on("click", function (event) {
   if (selectedelement!=null)
      selectedelement.selectize(false, { deepSelect: true });
   selectedelement = this.selectize({ deepSelect: true })
});
...