Блог

Главная - Вопросы по программированию - Как динамически найти текстовый элемент внутри родительского элемента в SVG?

Как динамически найти текстовый элемент внутри родительского элемента в SVG?

#javascript #svg

Вопрос:

У меня есть 2 разные структуры SVG:

 // This is the 1st structure
<g id="CDT-B6-2">
  <path id="CDT-B6-box" class="fil11"/>
  <text x="936" y="540" id="CDT-B6-text" class="fil13 fnt31">888</text>
</g>

// This is the 2nd structure
<g id="CDT-B6-2">
  <path id="CDT-B6-box" class="fil11"/>
  <g transform="matrix(0.987916 0 0 1 301.975 450.301)">
    <text x="936" y="540" id="CDT-B6-text" class="fil13 fnt31">888</text>
  </g>
</g>

В настоящее время у меня есть этот код: document.querySelectorAll("text[id$='CDT-B6-2'") но он применим только к 1-й структуре. Я не могу найти текстовый элемент из 2-й структуры.

Комментарии:

1. это в другом документе. @RobbyCornelissen

2. нет, это не так. @RobbyCornelissen

3. Разве вы не хотите искать идентификатор CDT-B6-text, а не CDT-B6-2?

4. С текущим селектором ничто не будет выбрано ни из одной структуры SVG.

5. ага. Я использую CDT-B6-2 только для скрытия целых элементов, но мне также нужно поместить текстовый элемент внутри CDT-B6-2, чтобы обновить textContent @seesharper

Ответ №1:

У вас не должно быть нескольких идентификаторов с одинаковым именем, так как идентификаторы должны быть уникальными. Измените их на классы, если у вас будут одинаковые имена для селекторов.

Просто нацельтесь на text селектор вот так const selector = document.querySelectorAll('.CDT-B6-2 text') .

Хотя следующее дало бы вам точно такой же результат… const selector = document.querySelectorAll('.CDT-B6-text') .

 const selector = document.querySelectorAll('.CDT-B6-2 text')


selector.forEach(textNode => {
  console.log(textNode)
}) 
 // This is the 1st structure
<g class="CDT-B6-2">
  <path class="CDT-B6-box fil11" />
  <text x="936" y="540" class="CDT-B6-text fil13 fnt31">888</text>
</g>

// This is the 2nd structure
<g class="CDT-B6-2">
  <path class="CDT-B6-box fil11" />
  <g transform="matrix(0.987916 0 0 1 301.975 450.301)">
    <text x="936" y="540" class="CDT-B6-text fil13 fnt31">999</text>
  </g>
</g>

ПРИМЕЧАНИЕ: при изменении нескольких идентификаторов я изначально просто изменил атрибут дубликата идентификатора на атрибут класса, создав в элементе два атрибута класса <div class="someclass" class="anotherclass"> . Это неверно, убедитесь, что все ваши классы находятся под одним class атрибутом. <div class="someclass anotherclass">

Комментарии:

1. Добро пожаловать 😉 рад помочь… Обязательно обратите внимание на упоминание идентификатора, идентификаторы должны быть уникальными для каждого селектора, вы не должны повторять идентификаторы в одном и том же документе. Лучшее и счастливое кодирование… developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

2. Ваш дубликат class на одном элементе неверен. С другой стороны, дубликаты идентификаторов имеют определенную цель, но это понимают только веб-разработчики, которые работают с ранних дней Internet Explorer. Идентификаторы создают глобальные переменные в каждом браузере (потому что каждый поставщик браузера должен был копировать поведение IE, иначе некоторые сайты IE не функционировали бы) Но используйте только дубликаты идентификаторов при создании прототипов… потому что каждый стропальщик веб-кода, у которого за плечами менее 20 лет веб-разработки, не поймет.

3. И вот объяснение того, что дубликаты идентификаторов являются частью стандарта HTML: tjvantoll.com/2012/07/19/…

4. @Danny’365CSI ‘ Энгельман да, атрибут дубликата класса действительно неверен, так как я изменил их идентификатор на класс и пропустил эту часть, спасибо, что обратили на это мое внимание.

Метки: