Is it possible to link graphviz elements to sphinx links?

Question

I use graphviz in my Sphinx documentation and would like to reuse links automatically generated by the RestructuredText code.

You may want to jump directly to the UPDATE 2 at the bottom for a summary (spoiler: does not work for me)

The output I get from

Hello
-----
Test of a graph

.. graphviz::

    digraph process {
           a [label="first", href="http://google.com"];
           b [label="second", href="#World"];
           a -> b;
        }

World
-----
Something else.

is correct, but despite the fact that the generated image is an SVG, firstand second are not clickable:

If I right click the embedded image and open it in a new tab, it has active links I can click on. It looks like if embedding the image prevented the links from being active.

The elements of my conf.py relevant to graphviz:

extensions = [
    'sphinx.ext.todo', 'sphinx.ext.graphviz'
]
graphviz_output_format = 'svg'

Is there something specific to set up in Sphinx to have this behaviour for embedded graphs?

UPDATE

bug report filed

UPDATE 2

I tried this with an updated Sphinx (which pulls in changes related to graphviz). The results are:

• opening a new page does not work. I chose a non-HTTPS page (http://www.timeanddate.com/) instead of Google and I get the page embedded in an IFRAME:

• the result is consistent across browsers (Chrome 47, FF 43, IE Edge)

The summary is that the embedding functionality (thank you @xuhdev for the work) is, at least for me, non functional.

Answer 1

I've found the problem, which I consider it a bug. The graphviz extension inserts svg images inside <img>, which makes the svg files non-interactive. I've made a pull request to fix the issue by replacing the img tag with object. You can workaround at this moment by using my branch:

pip install git+https://github.com/xuhdev/sphinx@graphviz-interactive-svg

An alternative solution which add an option to inline the svg files is also available.

Also you need to update your graphviz file with target:

digraph process {
       a [label="first", href="http://google.com", target="_top"];
       b [label="second", href="#World"];
       a -> b;
    }

You can view possible targets here.