我正在尝试创建一个具有可点击元素的 svg 图像,它将引导您到该元素的文档,就像在 doxygen 本身中创建的类图一样。
我们还在 VSCode 中使用 draw.io 作为插件,但这也应该在没有 VSCode 的情况下工作。
在这种特殊情况下,它是关于创建一个具有可单击组件的架构图,这将打开该组件的文档。
Draw.io 允许将图片保存为 svg,还允许在内部添加链接。它具有特殊的格式,同时还将绘图信息存储在 svg 中。
现在我有两个问题:
举个例子。创建drawio文件并将其存储为svg后的SVG文件内容(修改了链接):
<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="121px" height="61px" viewBox="-0.5 -0.5 121 61" content="<mxfile><diagram id="oiqSWY96R6bIFQIC5yqU" name="Page-1">dZPLboMwEEW/hmUisPtIlw0J7abqIoq6jAwM2K3ByJhC+vW1Y5uHkkgIxsd3/LgzBDiuhjdJGvohcuABCvMhwLsAocenjX4bcLbgGb9YUEqWWxRN4MD+wMHQ0Y7l0C6ESgiuWLOEmahryNSCESlFv5QVgi93bUgJV+CQEX5Nv1iuqKWbx3Di78BK6neOQjdTES92oKUkF/0M4X2AYymEslE1xMCNd94Xm5fcmR0PJqFWNxKOLcjP9Nt4gkJOUl2Wi2gb720mZ/WPRQUzt301qbOnb/maC+0EFa1eIzmmXa26FULr8EEPqajAfIDxQn9JhR6wGgN9uqQSecd17VCyJZx3hZGlNlo1nKhCyMqgjumaoGQnhnMJ9W0RVZW+fOLJKT1lJ1hbimauoNHY0bBWnX0xpejqHIw0DPC2p0zBoSGZme1192p2WRHvIh3ahX9BKhjuWh7N9nsDbYmSZy1xCQi72rvmx75t+qmVIt8fdNZGT44R173luPRUYOOwvaMfzkru0dReF/nsH8X7fw==</diagram></mxfile>">
<defs/>
<g>
<a xlink:href="https://stackoverflow.com">
<rect x="0" y="0" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 30px; margin-left: 1px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
BCE
</div>
</div>
</div>
</foreignObject>
<text x="60" y="34" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
BCE
</text>
</switch>
</g>
</a>
</g>
<switch>
<g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
<a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
<text text-anchor="middle" font-size="10px" x="50%" y="100%">
Text is not SVG - cannot display
</text>
</a>
</switch>
</svg>
我不是 svg 专业人士,但据我了解,“a xlink”在这里正确使用,如下所示:https://www.w3.org/wiki/SVG_Links
当我在 doxygen 中引用它时
\image html testpic.drawio.svg
它显示在文档中,但不可点击。该图像是由 doxygen 使用对象标签而不是 img 标签嵌入的,所以这似乎也很好。但我注意到,打开后,有一个“#document”: 这会导致问题吗?我不确定这意味着什么或如何防止它。
所以我的两个问题是:
PS:为什么我想要这个? 我们目前正在使用多种工具来编写文档,这使得向其中添加一些内容变得非常烦人,并且一些工作是在一个工具中完成的,这还需要在另一个工具中完成,这需要再次更新另一个工具中的文档等等。此外,嵌入任何其他工具的图表甚至不会提供任何“可点击”功能。我们需要一个易于维护、易于开发人员创建和使用的文档。
我正在使用 doxygen 1.10.0
老问题,但我面临着完全相同的问题。当我直接在浏览器中打开 SVG 时,SVG 中嵌入的链接工作得很好。当我将 SVG 图像包含在 doxygen 文档中时,链接不再起作用。我查看了生成的代码并确定了问题的原因。 Doxygen 为图像创建以下 HTML 代码:
<object type="image/svg+xml" data="../doxygen/LinkTest.svg" style="pointer-events: none;">drawio link test</object>
当我手动删除样式属性时,所有内容(包括超链接)都会按预期工作:
<object type="image/svg+xml" data="../doxygen/LinkTest.svg">drawio link test</object>
有人知道如何告诉 doxygen 不要生成那个愚蠢的样式属性吗?