K
K
Kalombyr2020-05-15 15:39:26
Qt
Kalombyr, 2020-05-15 15:39:26

How to display svg in QML with the possibility of interaction and styling?

Hello.
The interface is in QML, I want to be able to embed and interact with SVG elements as natively as possible.
For example, recolor individual elements inside SVG in real time. move, catch a click on them, etc.
Widgets have a special class that is responsible for rendering and so on, but on qml, except for displaying through "Image", I did not find anything.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
P
Pavel K, 2020-05-16
@Kalombyr

Tynts: https://doc.qt.io/qt-5/qml-qtquick-shapes-shape.html (Through PathSvg you can directly display the path itself from svg "" . You can animate
/ change / interact relatively easily.
But here, as usual, there are a lot of BUT:
1. You will have to write all the styles: stroke, fill, gradients manually for the Shape (as in the example from the link) 2. Interaction - on
the entire Shape.
TORRRMOZZZA, because for evenness and smoothness you need to set layer.samples: 16 (minimum).Especially noticeable if you are planning for mobile phones.How a static interface will still pull if you are suddenly going to make it.
4. Dances with scaling and sizes (Shape scale appeared only with 5.12 like)
5. If the paths have a transform (Illustrator likes to put it where it’s not nailed), then either write it the same (and increase the brakes), or immediately apply to path.d, but for this you will have to write your own parser (because transformations can be the same on the group and on the whole svg), and it’s pretty cool - I know from my own experience :D
6. Not all SVG features are implemented explicitly form. Some are amenable to "crutching" (through ShaderEffects, or by writing your own fragment shaders as a last resort. For example - clipPath will have to be done through OpacityMask or beat the designer to cut it right away), which again increases the brakes.
Describe what exactly you need, I'll tell you more specifically where to dig. It may be easier in general to inherit from QQuciPaintedItem and entrust all the work to QSvgRenderer.

J
Jacob E, 2020-05-15
@Zifix

It is still possible to recolor the entire image, the rest cannot be done by standard means.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question