Как извлечь данные <d>в SVG через JavaScript

Question

Я написал компонент icon черезactjs для анализа файлов SVG. Я использую сборник рассказов, чтобы показать свой значок компонента. Теперь мне нужна помощь для написания командной строки для синтаксического анализа файла SVG для компонента. Мне нужно сценарий элемента в файле SVG, и я не знаю, как этого добиться.

Я планирую написать это в javascript. И вот один из примеров моих файлов SVG.

<svg viewBox="0 0 1024 1024" p-id="3378" width="200" height="200">
  <path d="..." p-id="3379"></path>
</svg>

Пусть кто-нибудь подскажет, как этого добиться. Я плохо извлекаю данные из файла.

Answer 1

Для конкретного вопроса из заголовка используйте следующий код JS:

document.querySelector("object")
    .contentDocument.querySelectorAll("path[path-id='3379']")[0].getAttribute("d")

На SVG следует ссылаться с использованием элемента object (замените содержимое атрибута width / height на соответствующеезначения):

<object
    type="image/svg+xml"
    data="./logo.svg"
    width="480"
    height="240"
></object>

Предполагается, что в вашем html есть один object элемент.В противном случае пометьте их атрибутом id и используйте #<the_id_goes_here> в первом селекторе:

document.querySelector("#<the_id_goes_here>")
    .contentDocument.querySelectorAll("path[path-id='3379']")[0].getAttribute("d")