13

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

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

.. image:: myfile.svg

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

4

6 回答 6

12

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

.. raw:: html

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

（关于您链接到的GitHub 问题，我不认为 Sphinx 可以在这里做很多事情——这真的很复杂——没有在指令中引入一个新选项.. image，让用户指定是否呈现为一个img或object标记。 )

于 2016-02-22T20:05:34.487 回答
7

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

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

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

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

于 2016-02-05T18:47:36.380 回答
4

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

.. raw:: html
    :file: images/image.svg
于 2018-05-03T09:51:57.397 回答
3

为了在 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/dependencies.html#pymedphys

于 2019-05-14T11:32:22.740 回答
2

我喜欢这种方式

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

演示

于 2020-03-20T06:36:10.420 回答
1

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

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

:download:`svg <images/image.svg>`
于 2017-09-21T12:29:40.800 回答