将可点击的 SVG 图像插入 Sphinx 文档

Question

我的 SVG 图像文件有几个节点，每个节点都与 URL 相关联。如果我直接在浏览器中打开这个文件，我可以点击每个节点，它会打开不同的 URLs。然而，当我在我的 Sphinx 文档中使用这张图片时，它不起作用 - 图片作为一个整体呈现，所以我需要通过 View Image 打开它，然后我才能点击节点。

我正在使用标准图像指令：

.. image:: myfile.svg

可能我需要使用其他东西？

Answer 1

一个简单的解决方案是在此 .. image:: myfile.svg 命令中向 svg 文件添加 link：

.. image:: myfile.svg
   :target: _images/myfile.svg

注意检查生成 html 文件时复制图像的相对目录。默认情况下，它应该是 _images/.

这样，您可以单击 SVG 文件，在普通页面中查看它，然后像往常一样单击它（不是一个完美的解决方案，但仍然..）。

Answer 2

Sphinx 为图像生成 <img> 标签，这在大多数情况下都是有意义的。但是，要使 svg 中的链接可点击，您应该使用 <object> 标签，即：

.. raw:: html

    <object data="myfile.svg" type="image/svg+xml"></object>

（关于 GitHub issue you linked to, I don't think there's a lot that Sphinx can do here—it's really quite complicated——没有向 .. image 指令引入一个新选项，让用户指定是否呈现为 img 或 object 标记.)

Answer 3

我自己仍在寻找更好的解决方案，但我运行遇到了同样的问题并使用了这个解决方法。

您可以使用下载指令为用户提供 link 文件。

:download:`svg <images/image.svg>`

Answer 4

我可能误解了 OP 的要求，但为什么不将 SVG 作为 html 包含到 sphinx 文档中呢？这似乎对我有用：

.. raw:: html
    :file: images/image.svg

Answer 5

为了在 sphinx 中包含可点击的 svg 链接，我做了以下操作：

.. raw:: html
    :file: ../graphs/pymedphys_analysis.gamma.svg

参见：

https://raw.githubusercontent.com/pymedphys/pymedphys/1915b9496e93782bdac7dcebff7e26e470e5ff57/docs/graphs/graphs.rst

这让我可以自由地在导入的样式中编写以下内容 sheet:

svg {
    width: 100%;
}

https://github.com/pymedphys/pymedphys/blob/f4d404fa1cf3f551c4aa80ef27438f418c61a436/docs/_static/style.css

这使 svg 适合容器。

参见：

https://pymedphys.com/developer/dependencies.html#pymedphys

Answer 6

我喜欢这样

.. raw:: html

    <a href="https://www.google.com/">
        <img src="https://img.shields.io/static/v1?&style=plastic&logo=appveyor&label=Google&message=link2google&color=FF0000" alt="No message"/></a>

将可点击的 SVG 图像插入 Sphinx 文档

Insert clickable SVG image into Sphinx documentation

restructuredtext

python-sphinx

read-the-docs