jQuery: извлечение самого верхнего элемента SVG из строки HTML с несколькими узлами

Question

Этот вопрос и этот вопрос похожи, но ответы не дают чистого, согласованного метода для поиска самого верхнего элемента SVG среди различных строк HTML.

Цель состоит в извлечении самого верхнего элемента SVG из строки HTML.

$(htmlString).find("svg") не работает.

$($.parseHTML(htmlString)) только генерирует массив объектов jQuery, но цель состоит в том, чтобы превратить htmlString в один объект jQuery, где вы можете выполнить поиск и получить самый верхний элемент SVG.

Пример строки HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 424 424" style="enable-background:new 0 0 424 424;" xml:space="preserve" width="512px" height="512px">
<g>
    <g>
        <path d="M35,89C15,89,0,74,0,54s15-36,35-36h353c20,0,36,16,36,36s-16,35-36,35H35z" fill="#7c7a7d"/>
        <path d="M388,176c20,0,36,16,36,36s-16,35-36,35H35c-20,0-35-15-35-35s15-36,35-36H388z" fill="#7c7a7d"/>
        <path d="M388,335c20,0,36,15,36,35s-16,36-36,36H35c-20,0-35-16-35-36s15-35,35-35H388z" fill="#7c7a7d"/>
    </g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

Результат $ ($. ParseHTML (htmlString)), где htmlString - строка выше:

$($.parseHTML(htmlString))

w.fn.init(6) [comment, text, comment, text, svg#Capa_1, text]
0: comment
1: text
2: comment
3: text
4: svg#Capa_1
5: text
length: 6

Answer 1

Вы не можете использовать find для результата, потому что разметка, которую вы даете jQuery, не представляет дерево: узлы Doctype и comments являются родственными элементами вашего <svg>.

Таким образом, вам нужно filter Записи jQuery, чтобы сохранить только узел SVG:

const $svg = $(`<?xml version="1.0" encoding="utf-8"?>
<!-- comment1  -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 424 424">
  <g>
    <g>
      <path d="M35,89C15,89,0,74,0,54s15-36,35-36h353c20,0,36,16,36,36s-16,35-36,35H35z" fill="#7c7a7d"/>
      <path d="M388,176c20,0,36,16,36,36s-16,35-36,35H35c-20,0-35-15-35-35s15-36,35-36H388z" fill="#7c7a7d"/>
      <path d="M388,335c20,0,36,15,36,35s-16,36-36,36H35c-20,0-35-16-35-36s15-35,35-35H388z" fill="#7c7a7d"/>
    </g>
  </g>
</svg>`)
.filter((i, el) => $(el).is('svg'));

console.log($svg.attr('id'));
$svg.find('path').attr('fill', 'red');
$('body').append($svg);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Теперь вы также можете использовать встроенный DOMParser, который может лучше обрабатывать пространства имен, чем jQuery.Оттуда у вас будет XMLDocument, чей documentElement будет вашим <svg> узлом.После этого вы сможете работать с ним из jQuery:

const str = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 424 424">
  <g>
    <g>
      <path d="M35,89C15,89,0,74,0,54s15-36,35-36h353c20,0,36,16,36,36s-16,35-36,35H35z" fill="#7c7a7d"/>
      <path d="M388,176c20,0,36,16,36,36s-16,35-36,35H35c-20,0-35-15-35-35s15-36,35-36H388z" fill="#7c7a7d"/>
      <path d="M388,335c20,0,36,15,36,35s-16,36-36,36H35c-20,0-35-16-35-36s15-35,35-35H388z" fill="#7c7a7d"/>
    </g>
  </g>
</svg>`;

const doc = (new DOMParser).parseFromString(str, 'image/svg+xml');
// use the second argument (context) of jQuery()
const $svg = $('svg', doc);
console.log($svg.attr('id'));
$svg.find('path').attr('fill', 'red');
$('body').append($svg);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>