Блог

Главная - Вопросы по программированию - Взаимодействие с SVG в пространстве имен

Взаимодействие с SVG в пространстве имен

#javascript #reactjs #svg #namespaces #visio

#javascript #reactjs #svg #пространства имен #visio

Вопрос:

Я пытаюсь вставить диаграмму SVG на веб-страницу и добавить взаимодействие с JavaScript.

Моя проблема: SVG включает элементы с пространствами имен, и когда я вставляю его в строку, отображаются только элементы, не связанные с пространством имен. Я пробовал прямую вставку в html, innerHTML и библиотеку SVGjs, все они дают тот же результат.

Есть ли способ отобразить SVG с пространством имен на странице и взаимодействовать с ним?

Для справки, файлы SVG поступают из Visio, и у меня нет контроля над пространствами имен. Кроме того, я использую Reactjs, если это может помочь.

Пример сценария (оба метода работают, но удаляют элементы с пространством имен):

 fetch (fileURL)
.then(response => response.text())
.then((image) => {
  let startOfSvg = image.indexOf('<svg')
  startOfSvg = startOfSvg >= 0 ? startOfSvg : 0

  // innerHTML method
  document.getElementById("map").innerHTML = image.slice(startOfSvg);

  // svg.js library
  const draw = SVG(image.slice(startOfSvg))
    .addTo('#map')
    .size('100%', 450);
}

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

1. Я добавил пример кода.

2. если у вас есть допустимый XML, то DOMParser.parseFromString с типом SVG mime, вероятно, здесь лучше.

3. Вы говорите о пространствах имен Visio или о пространстве имен SVG? v: и тому подобное останется невидимым.

4. Существует флажок для экспорта SVG без пространства имен visio. Помимо этого, вы могли бы взглянуть на мой экспортер (он также может экспортировать чистый svg, в зависимости от используемого вами шаблона): unmanagedvisio.com/products/svg-publish

5. @Christophe скопировано как ответ

Ответ №1:

Существует флажок для экспорта SVG без пространства имен visio. Помимо этого, вы могли бы взглянуть на мой экспортер (он также может экспортировать чистый svg, в зависимости от используемого вами шаблона): https://unmanagedvisio.com/products/svg-publish