英文:
css or other antora / asciidoc options to display svg tooltips form html files
问题
我有点震惊地发现，在HTML页面中嵌入到<img>标记中的SVG图像上不会显示工具提示。
我找到了一个带有一些选项的参考链接；https://stackoverflow.com/a/28917577/8980882。在这里可以使用<object>标记。<iframe>选项在我在Chrome和Safari上进行的基本测试中似乎不太好。
我正在使用Antora构建文档，而SVG图像中的工具提示包含了大量信息，以减少图像的噪音。这是一个示例；https://docs.arch2code.org/a2c-docs/latest/exampleArchitecture.html。我必须警告说，这个链接可能会随着时间的推移而更改或变得过时，目前只是一个示例文档设置。如果您右键单击第二个SVG图像并在新标签中打开，就会有很多工具提示。
我的问题是，是否有一些CSS编辑或附加的UI文件，我可以将其添加到我的Antora设置中，以便通过<object>标记而不是<img>标记来链接图像？我还希望这些图像使用100%的宽度，这对于<object>标记似乎不太明显。
我在CSS中是个新手，对HTML和Antora也不太了解，所以对于某些人来说可能很容易，但对我来说不太明显。
Antora-UI中的这些CSS行可能是可以覆盖或重新编写的内容？
https://gitlab.com/antora/antora-ui-default/-/blob/master/src/css/doc.css#L435-440
我天真地期望HTML会将工具提示从SVG图像传递上来。
谢谢您的任何帮助。
英文:
I was sort of shocked to learn that tooltips in svg images don't display when an image is part of an html page inside a <img > tag.
I found a reference with some options; https://stackoverflow.com/a/28917577/8980882. Here <object> </object> tag can be used. The <iframe> </iframe>. option seems less nice in my basic testing on chrome and safari.
I am using antora to build documentation and the svg images have a lot of information in the tooltips to reduce the noise of an image. Here is an example; https://docs.arch2code.org/a2c-docs/latest/exampleArchitecture.html. I have to warn that this link my change or become obsolete over time it is just a sample document setup at this point. The second svg if you right click and open in a new tab has lots of tool tips.
My question is, is there some css edits that I can make, or supplemental-ui files I can add to my antora setup to get images to be linked via <object> tags instead of <img> tags? I also would really like these to use a width of 100% which seems less obvious for <object> tags.
I am a novice at css, html and antora so this might be easy for someone but very non obvious to me.
These lines of css in the antora-ui might be what can be over-ridden or re-written?
https://gitlab.com/antora/antora-ui-default/-/blob/master/src/css/doc.css#L435-440
I was naively expecting HTML to pass the tool tips up from svg images.
Thank you for any help.
答案1
得分: 0
我从antora.zulipchat.com上得到了另一位用户的答案。答案是已经存在于asciidoc中并可在antora中使用的选项。
解决方案是在图像标签中使用opts=interactive，参见https://docs.asciidoctor.org/asciidoc/latest/macros/image-svg/#options-for-svg-images
因此，在我的图像之前是image::sample.svg[Name,width=100%]。现在是image::sample.svg[Name,opts=interactive,width=3072]。
opts=interactive是解决方案，而width=3072会将SVG扩展到该大小，如果页面尺寸增大，图像将扩展到其完整大小。这些图像类型可以很好地进行缩放，所以这个解决方法非常有效。不需要任何css代码。
英文:
I got an answer on antora.zulipchat.com from another user. The answer is an option that is already present in asciidoc and usable in antora.
The solution is to use opts=interactive in the image tags, see https://docs.asciidoctor.org/asciidoc/latest/macros/image-svg/#options-for-svg-images
So before my images image::sample.svg[Name,width=100%]. Now they are image::sample.svg[Name,opts=interactive,width=3072].
The opts=interactive is the solution and the width=3072 expands the svg up to that size if the page is sized up that large. So the second part is more of a max size than allowing the image to expand up to its full size when the page size increases. These image types scale well so that workaround is working nicely. No need for any css code.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论