Кликабельные изображения SVG для веб-сайта

Я использую pydot для создания графических изображений SVG. Я заметил на этом сайте: http://safemap.sourceforge.net/demo/index-no-refresh.html, что у них есть кликабельный SVG. (На этом веб-сайте также показано, как можно стилизовать SVG с помощью CSS: https://css-tricks.com/using-svg/)

Я искал документацию по созданию интерактивных SVG с помощью pydot, но ничего не нашел.


python svg clickable graphviz pydot
person Juicy    schedule 10.06.2015    source источник
comment
Просто добавьте к ним событие клика — они ведут себя как обычные элементы DOM.   -  person nicholaswmin    schedule 10.06.2015
comment
OP спрашивает о возможностях библиотеки, а не о SVG в целом.   -  person rr-    schedule 10.06.2015

Ответы (2)


arrow_upward
2
arrow_downward

Pydot — это оболочка для Graphviz. Разумно сначала проверить, можете ли вы сделать это в Graphviz.

Оказывается, вы можете:

  1. Чтобы связать URL-адреса с узлами, вы можете использовать атрибут Graphviz URL.
  2. Чтобы сделать ссылки доступными в браузере, вы можете использовать этот ответ.

Теперь вы можете сделать это с помощью pydot? Я так думаю, но не проверял. Взглянув на исходный код pydot, я вижу, что он поддерживает любые атрибуты — в тестах мы видим, что пользователь проходит shape:

self.graph_directed.add_node( pydot.Node('node', shape='box') )

и в сам pydot мы видим, что он может поддерживать любой вид атрибутов, а не только shape:

class Node(object, Common):
    (...)
    def __init__(self, name = '', obj_dict = None, **attrs):
        (...)
        self.obj_dict[ 'attributes' ] = dict( attrs )

Поэтому я бы попробовал использовать pydot.Node('node', url='http://somewhere'). Если это не удастся, я создам файл .dot вручную и передам его через pydot.

Предупреждение

Если вы планируете использовать SVG в <img/>, скорее всего, ваши ссылки не будут работать из-за политики безопасности вашего веб-браузера. В этом случае вам нужно встроить его непосредственно в ваш HTML, как это делает веб-сайт, на который вы ссылаетесь. Это особенно важно, если изображения размещены на другом домене, чем главная страница.

person rr-    schedule 10.06.2015
comment
Спасибо вам за помощь! К сожалению, мне не удалось заставить работать атрибут url узлов (выдает ошибку pydot при записи графика). Мне удалось получить атрибут href для HTML-подобных таблиц, что является «достаточно хорошим», хотя я бы предпочел, чтобы весь узел был доступен для кликов. - person Juicy; 10.06.2015
comment
Возможно, это могло бы иметь значение, если бы вы использовали прописные буквы URL? - person rr-; 10.06.2015
comment
Если я использую graphviz и импортирую Digraph, тогда URL-адрес в верхнем регистре работает для меня: dot.node('A', 'King Arthur',URL='http://www.google.com/ABC') - person Rudiger Wolf; 17.12.2016

arrow_upward
2
arrow_downward

Вы можете

последний дает вам больше свободы форматирования с помощью таблиц.

person stefan    schedule 10.06.2015
comment
Спасибо вам!! Атрибут href HTML-подобных меток работает как шарм. Я не мог заставить работать атрибут URL узлов. Вам удалось? - person Juicy; 10.06.2015
comment
Я использовал HTML как метки для узлов с изображениями, текстом и ссылками в генеалогическом древе. - person stefan; 11.06.2015