命名空間 SVG 上的交互

Question

我正在嘗試在 Web 頁面上插入 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);
}

Answer 1

有一個復選框可以在沒有 visio 命名空間的情況下導出 SVG。 除此之外，您可以查看我的導出器（它也可以導出純 svg，具體取決於您使用的模板）： https://unmanagedvisio.com/products/svg-publish