Draw.io导出SVG嵌入Doxygen后无法点击及自动链接问题咨询

场景与需求 #

用Draw.io制作带可点击元素的SVG架构图，目标是点击元素直接跳转到对应组件的Doxygen文档（和Doxygen自动生成的类图效果一致），同时希望避免手动输入Doxygen生成后的HTML链接，借助其自动链接功能减少操作量和出错概率。

当前问题 #

1. 通过\image html testpic.drawio.svg将Draw.io导出的SVG嵌入Doxygen 1.10.0生成的文档后，Firefox和Edge浏览器中均无法点击SVG内的链接。
2. 手动编写Doxygen组件的HTML链接繁琐且易因路径变更失效，需要自动关联的方案。

解决方案 #

一、修复SVG链接无法点击的问题 #

1. 调整Draw.io导出设置

导出SVG时选择「完整SVG」模式，不要选「精简SVG」，确保<a>锚点标签、xlink:href等链接属性完整保留，避免Draw.io自动精简掉关键链接结构。

2. 替换Doxygen嵌入方式

放弃\image html引用方式，改用\htmlinclude testpic.drawio.svg直接将SVG代码嵌入HTML页面，浏览器会直接解析SVG内的链接逻辑，而非将其作为静态图片处理。

3. 修正SVG内的链接属性

检查Draw.io导出的SVG代码，确保链接元素符合规范：

• 用<a>标签包裹可点击图形元素
• 给<a>添加xlink:href属性（对应跳转链接）
• 补充target="_top"属性（避免在Doxygen的框架内打开链接）

示例SVG片段：

<a xlink:href="MyClass.html" target="_top">
  <rect x="10" y="10" width="100" height="50" fill="#ccc"/>
  <text x="60" y="40" text-anchor="middle">MyClass</text>
</a>

二、实现Doxygen自动链接组件文档 #

1. 利用Doxygen全局索引+自定义脚本自动替换链接

这种方式无需手动写链接，完全依赖Doxygen生成的组件索引：

1. 在Draw.io中给可点击元素添加自定义属性，比如data-doxygen-ref="MyClass"（值为Doxygen中组件的标识，如类名、函数名）。
2. 修改Doxygen的header.html（可通过HTML_HEADER配置指定），添加以下脚本：

window.addEventListener('load', function() {
  // 遍历页面中所有SVG图片
  document.querySelectorAll('img[src$=".svg"]').forEach(async svgImg => {
    // 加载SVG原始内容
    const res = await fetch(svgImg.src);
    const svgContent = await res.text();
    // 解析SVG为DOM元素
    const parser = new DOMParser();
    const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml');
    
    // 处理带data-doxygen-ref属性的元素
    svgDoc.querySelectorAll('[data-doxygen-ref]').forEach(el => {
      const refName = el.getAttribute('data-doxygen-ref');
      // 从Doxygen全局索引中获取组件链接
      const targetUrl = window.doxygen?.index?.[refName];
      if (targetUrl) {
        // 创建SVG兼容的<a>标签并包裹元素
        const link = document.createElementNS('http://www.w3.org/2000/svg', 'a');
        link.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', targetUrl);
        link.setAttribute('target', '_top');
        el.parentNode.insertBefore(link, el);
        link.appendChild(el);
      }
    });
    
    // 替换原img标签为处理后的SVG
    svgImg.replaceWith(svgDoc.documentElement);
  });
});

3. 确保Doxygen配置中GENERATE_INDEX = YES（默认开启），这样页面会加载包含所有组件链接的全局索引doxygen.index。

2. 半自动化：用Doxygen的\ref命令生成链接

先在Doxygen注释中用\ref MyClass生成正确的组件链接，复制该链接后粘贴到Draw.io元素的链接设置中，这种方式比手动写URL更可靠，若Doxygen链接格式变更，只需重新生成一次链接即可。

内容的提问来源于stack exchange，提问作者NetoBF