命名空间 SVG 上的交互

Question

我正在尝试在网页上插入 SVG 图表并添加 JavaScript 交互。

我的问题：SVG 包含带有命名空间的元素，当我将它内联插入时，只会呈现非命名空间元素。我试过在 html、innerHTML 和 SVGjs library 中直接插入，结果都一样。

有没有办法在页面上呈现带命名空间的 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

命名空间 SVG 上的交互

Interaction on namespaced SVG

javascript

svg

visio

namespaces

reactjs