Reputation: 169
I am trying to create an svg-image which has clickable elements which will route you to the documentation for that element, like the created class-diagrams in doxygen itself.
We are also using draw.io as a plugin in VSCode, but this should also work without VSCode.
In that special case it's about creating an architecture-diagram which has clickable components, which will open the documentation for that component.
Draw.io allows to save pictures as svg and also allows adding links internally. It has a special format whereas it also stores the drawio-information inside the svg.
Now I have two problems:
To have an example. The SVG-file-content (modified the links) after I created the drawio-file and stored it as 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>
I'm not a an svg-pro but as I understood the "a xlink" is used correctly here as it is stated: https://www.w3.org/wiki/SVG_Links
as soon as i reference it in doxygen with
\image html testpic.drawio.svg
it is shown in the documentation but it's not clickable. The image is embedded by doxygen using the object-tag and not the img-tag so this also seems to be fine. But what I noticed, after the opening, there is a "#document":
Does this cause the problem? I'm not sure what this even means or how I can prevent it.
So my two questions are:
PS: Why do I want this? We are using multiple tools currently for documentation which makes it pretty annoying adding something to it and some work is done in one tool which requires also work in another tool which requires to update a documentation in another tool again and so on. Also embedding a diagram from any other tool won't even deliver any "clickable"-functionality. We need a documentation that is easy to maintain and easy to create and use for the developers.
I am using doxygen 1.10.0
Upvotes: 0
Views: 89