Почему в этом элементе SVG есть скрытые текстовые узлы?

Question

У меня есть 4 сложные полилинии в SVG, содержащиеся в родительском элементе (myLines). Я хочу сохранить полилинии в массиве, чтобы позже вызвать их в моем коде. По какой-то причине браузер считает, что между полилиниями внутри родительского элемента «myLines» есть скрытые текстовые узлы. Когда я пытаюсь найти узлы в инспекторе, используя инструменты разработчика, браузеры говорят «некоторые узлы были скрыты», ссылаясь на эти узлы.

Однако, когда я использую appendChild и перемещаю полилинии из одного элемента в другой, браузер обнаруживает только 4 полилинии, которые на самом деле там.

Что здесь происходит?

Я подумал о нескольких обходных путях, чтобы избежать этой проблемы, но я бы предпочел знать, что происходит wtf, так что я действительно могу это исправить и узнать, что я сделал не так.

var main = document.querySelector('main');
var lines = main.querySelectorAll('g#myLines');
var element=document.getElementById("myLines2");
var elArray=[];
console.log(lines);
for (z=0; z<4; z++){
  console.log("lines[0].childNodes["+z+"]= "+lines[0].childNodes[z]);
  elArray[z]=(lines[0].childNodes[z]);
/* 	    element.appendChild(lines[0].childNodes[z]); */
   }

Пожалуйста, проверьте эту скрипку. Если вы посмотрите в консоли и включите этот код "element.appendChild (lines [0] .childNodes [z]);" в строке 9 вы можете видеть, что текстовые узлы не отображаются с использованием appendChild. https://jsfiddle.net/NZSIL/8psru5mv/

Спасибо !!

Answer 1

Текстовые узлы ссылаются на пробелы (символы новой строки), которые присутствуют в вашем представлении SVG между polyline элементами.

Рассмотрим этот пример, где мы получаем ссылку на группу g1 и проверяем количество дочерних узлов. В этом примере будет напечатано 3 со ссылкой на пробел перед элементом rect (текстовый узел), сам элемент rect (узел элемента) и пробел после элемента rect (текстовый узел).

const group = document.getElementById('g1');

console.log(group.childNodes.length); // 3 nodes

<svg id="svg1">
  <g id="g1">
    <rect width="100" height="100"/>
  </g>
</svg>

Напротив, приведенный ниже фрагмент будет учитывать только элемент rect как дочерний узел, поскольку между тегами g и тегами rect нет пробелов.

const group = document.getElementById('g1');

console.log(group.childNodes.length); // 1 node

<svg id="svg1"><g id="g1"><rect width="100" height="100"/></g></svg>

Распространенным решением для подобных случаев является фильтрация текстовых узлов и работа только с узлами элементов:

const group = document.getElementById('g1');

const nodes = [...group.childNodes];

console.log(nodes.length) // 3 nodes

const elements = nodes.filter(n => n.nodeType === Node.ELEMENT_NODE);

console.log(elements.length); // 1 element

<svg id="svg1">
  <g id="g1">
    <rect width="100" height="100"/>
  </g>
</svg>

В приведенном выше фрагменте все узлы, которые не являются узлами элементов (тип узла Node.ELEMENT_NODE), отфильтровываются, в результате получается массив из одного элемента, содержащий узел rect.