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

Question

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

View Image

打开它，然后我才能单击节点。

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

.. image:: myfile.svg

也许我需要使用其他东西？

Answer 1

Sphinx 为图像生成

<img>

标签，这在大多数情况下都是有意义的。但是，要使 svg 内的链接可单击，您应该使用

<object>

标签，即：

.. raw:: html

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

（关于您链接到的 GitHub 问题，我认为 Sphinx 在这里可以做的事情并不多——它真的相当复杂——缺少向

.. image

指令引入一个新选项来让用户指定是否渲染为

img

或

object

标签。）

Answer 2

一个简单的解决方案是在此

.. image:: myfile.svg

命令中添加指向 svg 文件的链接：

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

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

_images/

。

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

Answer 3

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

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

Answer 4

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

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

参见：

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

这让我可以在导入的样式表中编写以下内容：

svg {
    width: 100%;
}

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

这使得 svg 根据需要适合容器。

参见：

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

Answer 5

我喜欢这样

.. 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>

---

<img>

和

<image>

有什么区别？

• <img>

  ：标准 HTML 元素

  标签是一个标准的 HTML 元素，用于将图像嵌入到网页中。

  它支持各种属性，例如

  src

  （指定图像源）、

  alt

  （图像的替代文本）、

  width

  和

  height

  。

  它受到所有网络浏览器的广泛支持，并且是在 HTML 文档中显示图像的正确方法。

• 剩余语法

  它是 reStructuredText (reST) 语法的一部分，它是一种主要在 Python 文档中使用的标记语言。

  在 reStructuredText 中，指令

  .. image::

  用于在文档中包含图像。

由于我使用了

..raw:: html

，因此最好坚持使用标准 HTML 进行编写。

如果您在浏览器中没有看到任何差异，可能是因为浏览器正在尝试猜测标签是什么。

Answer 6

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

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

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