命名空间 SVG 上的交互答案

【问题标题】：Interaction on namespaced SVG命名空间 SVG 上的交互
【发布时间】：2021-03-20 03:12:44
【问题描述】：

我正在尝试在网页上插入 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);
}

【问题讨论】：

我添加了一个代码示例。
如果您有有效的 XML，那么带有 SVG mime 类型的 DOMParser.parseFromString 可能是一个更好的选择。
您是在谈论 Visio 命名空间还是 SVG 命名空间？ v: 等将保持不可见。
有一个复选框可以在没有 visio 命名空间的情况下导出 SVG。除此之外，你可以看看我的导出器（它也可以导出纯 svg，取决于你使用的模板）：unmanagedvisio.com/products/svg-publish
@Christophe 复制为 anwer

标签： javascript reactjs svg namespaces visio

【解决方案1】：

有一个复选框可以在没有 visio 命名空间的情况下导出 SVG。除此之外，您可以查看我的导出器（它也可以导出纯 svg，具体取决于您使用的模板）：https://unmanagedvisio.com/products/svg-publish

【讨论】：