Как в QML вывести svg с возможностью взаимодействия и стилизации?

Question

[Kalombyr]

Здравствуйте.
Интерфейс на QML, хочется иметь возможность максимально нативно встраивать и взаимодействовать с элементами SVG.
К примеру, перекрасить отдельные элементы внутри SVG в реальном времени. переместить, отловить клик по ним и т.д.
На виджетах есть специальный класс, который отвечает за рендеринг и прочее, а вот на qml, кроме как отображения через "Image" ничего не нашёл.

Answer 1

[Pavel K]

Тынц: https://doc.qt.io/qt-5/qml-qtquick-shapes-shape.html (Через PathSvg можете вывести непосредственно сам путь из svg "" .
Анимировать/изменять/взаимодействовать можно относительно легко.

Но тут, как обычно, есть много НО:
1. Вам придётся все стили: обводку, заливку, градиенты прописывать вручную у Shape (как в примере по ссылке)
2. Взаимодействие - на Shape целиком. Нужно на отдельный путь - извольте его в отдельный Shape засунуть
3. ТОРРРМОЗЗЗа, т.к. для ровности и плавности нужно выставлять layer.samples: 16 (минимум). Особенно заметно, если планируете под мобилки. Как статичный интерфейс ещё потянет, если Вы вдруг собрались его делать.
4. Пляски с маштабированием и размерами (У Shape scale появился только с 5.12 вроде)
5. Если у путей стоит какой transform (Иллюстратор его любит выставлять где не приколочено), то либо его то же прописываете (и увеличиваете тормоза), либо сразу применяете к path.d, но для этого придётся писать свой парсер (т.к. трансформации могут быть и на группе то же и на svg целиком), причём достаточно нефиговый - по себе знаю :D
6. Далеко не все возможности SVG реализованы в явном виде. Некоторые поддаются "костылянию" (через ShaderEffects, либо через написание собственных фрагментных шейдеров в крайнем случае. Например - clipPath придётся делать через OpacityMask либо бить дизайнера, что бы обрезал сразу), что опять же увеличивает тормоза.

Опишите для чего именно Вам нужно, подскажу конкретнее куда копать. Может проще вообще в сторону наследования от QQuciPaintedItem и всю работу доверить QSvgRenderer.

Comments

[TheMrAnon]

Я вот тоже искал на эту тему информацию, но накопал только то, что нормальный интерактив qml в svg сделать не может (например мне нужно было в графе с более чем 250 элементами, который построен в
svg, реализовать перетаскивание элементов). Единственное решение, которое пришло в голову делать все в html с помощью JavaScript и подключать его к qml, но может есть и какой то другой способ сделать это

PS. Как я понял из документации, если используется QtQuick 1 то все это можно реализовать через Qt SVG классы, в QtQuick 2 такой возможности нет т.к. они сменили родителя с QPainter на что то другое (тут я не вспомню)

[Pavel K]

TheMrAnon, не соглашусь. Штатных возможностей, впринципе, хватает.

[Kalombyr]

Спасибо.

Answer 2

[Яков Е]

Перекрасить изображение целиком ещё реально, остальное стандартными средствами сделать не получится.