QGraphicsSvgItem: could not display correct position of elements

Minh MT

Hi,

sorry if this seem old question, but since i tried to do research whole the days but still could not find out exact answer. i'm newbie with great Qt world :).

I have a SVG map file (map.svg) that include some map Zone elements.

When i try to show the SVG on GraphicScene , its all working BUT the problem that when i tried to render some Zone with customeQGraphicsSvgItem class with difference color, the Zones always set at Center of the Scene(or top left if i change the View's alignment ).

What i'm doing wrong please? How could i display** child elements **of a SVG to correct position like how we open its using browser?

Minh MT

Hi,

i solved the problem myself but i still leave the question here in case someon esle needed.

This is the code i did to display the Svg Map and Zone:

QGraphicsScene *scene = new QGraphicsScene(ui->graphicsView);
QSvgRenderer    *svgRender  =    new QSvgRenderer(QString("://files/map.svg"));

scene->setSceneRect(0,0,400,900); //set rect as SVG viewport

//map background
QGraphicsSvgItem *mapBackground = new QGraphicsSvgItem("://files/map.svg");
mapBackground->setParent(scene);
mapBackground->setPos(0,0);
scene->addItem(mapBackground);


MapZone *zone1  =   new MapZone();
scene->setBackgroundBrush(QBrush(Qt::gray, Qt::SolidPattern));
zone1->setSharedRenderer(svgRender);
zone1->setElementId("zone1");
zone1->setParentItem(mapBackground);
zone1->setToolTip("this is zone 1");

QRectF bound    =   svgRender->boundsOnElement("zone1");

zone1->setPos(bound.x(), bound.y());  // this code is must to set correct posisiton
scene->addItem(zone1);

ui->graphicsView->setScene(scene);

SGaist

Hi and welcome to devnet,

Glad you found out and thanks for sharing !

Since you have it working now, please mark the thread as solved using the "Topic Tool" button so that other forum users may know a solution has been found :)

galou_breizh

Please correct me if I'm wrong but I think the issue is not solve, qt least not with Qt4.8.

This minimal example shows the svg elements at the wrong place:

#include <QApplication>
#include <QByteArray>
#include <QtSvg>

QByteArray g_svg_content(
    "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>"
    ""
    "<svg height=\"200\" width=\"200\">"
    "  <circle id=\"blue\""
    "    cx=\"50\""
    "    cy=\"50\""
    "    r=\"40\""
    "    fill=\"blue\" />"
    "  <circle id=\"red\""
    "    cx=\"99\""
    "    cy=\"99\""
    "    r=\"30\""
    "    fill=\"red\" />"
    "</svg>");

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QGraphicsScene scene;
    QGraphicsView view(&scene);

    QSvgRenderer* renderer = new QSvgRenderer(g_svg_content);

    QString element_id;
    element_id = QString("blue");
    if(renderer->elementExists(element_id))
    {
        QGraphicsSvgItem* svg = new QGraphicsSvgItem();
        svg->setSharedRenderer(renderer);
        svg->setElementId(element_id);
        QRectF rect = renderer->boundsOnElement(element_id);
        svg->setPos(rect.bottomLeft());
        scene.addItem(svg);
    }

    element_id = QString("red");
    if(renderer->elementExists(element_id))
    {
        QGraphicsSvgItem* svg = new QGraphicsSvgItem();
        svg->setSharedRenderer(renderer);
        svg->setElementId(element_id);
        QRectF rect = renderer->boundsOnElement(element_id);
        svg->setPos(rect.bottomLeft());
        scene.addItem(svg);
    }

    view.show();

    return app.exec();
}

The circles are overlapping instead of just touching each other. What is correct way to achieve showing only parts of an svg file at the correct location? Thanks for help!

galou_breizh

I also probably found the answer myself, the problem was the use of rect.bottomLeft() instead of rect.topLeft().

The fully working example is then:

#include <QApplication>
#include <QByteArray>
#include <QtSvg>

QByteArray g_svg_content(
    "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>"
    ""
    "<svg height=\"200\" width=\"200\">"
    "  <circle id=\"blue\""
    "    cx=\"50\""
    "    cy=\"50\""
    "    r=\"40\""
    "    fill=\"blue\" />"
    "  <circle id=\"red\""
    "    cx=\"99\""
    "    cy=\"99\""
    "    r=\"30\""
    "    fill=\"red\" />"
    "</svg>");

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QGraphicsScene scene;
    QGraphicsView view(&scene);

    QSvgRenderer* renderer = new QSvgRenderer(g_svg_content);

    QString element_id;
    element_id = QString("blue");
    if(renderer->elementExists(element_id))
    {
        QGraphicsSvgItem* svg = new QGraphicsSvgItem();
        svg->setSharedRenderer(renderer);
        svg->setElementId(element_id);
        QRectF rect = renderer->boundsOnElement(element_id);
        svg->setPos(rect.topLeft());
        scene.addItem(svg);
    }

    element_id = QString("red");
    if(renderer->elementExists(element_id))
    {
        QGraphicsSvgItem* svg = new QGraphicsSvgItem();
        svg->setSharedRenderer(renderer);
        svg->setElementId(element_id);
        QRectF rect = renderer->boundsOnElement(element_id);
        svg->setPos(rect.topLeft());
        scene.addItem(svg);
    }

    view.show();

    return app.exec();
}

Hope this helps!