QSvgRenderer incorrectly renders text
-
Hi, I'm trying to draw SVG files from different programs and even with simple examples the text in a SVG does not be placed correctly, this is my drawing:
And this is the result:
Any idea?
Best and Thanks a lot. -
Hi, I'm trying to draw SVG files from different programs and even with simple examples the text in a SVG does not be placed correctly, this is my drawing:
And this is the result:
Any idea?
Best and Thanks a lot.@FredJupiter Not sure how this is related to Qt?
Do you mean the SVG image is shown wrongly in Qt application? -
According to https://doc.qt.io/qt-6/svgrendering.html
Qt supports the static features of SVG 1.2 Tiny. ECMA scripts and DOM manipulation are currently not supported.
I'm not sure but perhaps there's some unsupported feature in your svg?
-
Yes, this happens with the QSvgRenderer and when I use the SVG in a QML Image....
@FredJupiter Does the SVG image work properly in an image viewer?
Also see comment from @Bonnie - it could be that your SVG image uses features not supported by Qt. -
Hm, it looks like if a <tspan> comes into play the text is not aligned accordingly...
-
tspan should be supported - what Qt version do you use and please post a small svg to reproduce the problem.
-
I've tested Qt 6.3, 6.7 and the latest 6.8.1.
The QML is quite simple:
<?xml version="1.0" encoding="UTF-8" standalone="no" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1080" height="1080" viewBox="0 0 1080 1080" xml:space="preserve"> <desc>Created with Fabric.js 5.2.4</desc> <defs> </defs> <g transform="matrix(1 0 0 1 540 540)" id="dd1d958a-c7e5-4f47-b3e5-f1d714fce3fa" > <rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke" x="-540" y="-540" rx="0" ry="0" width="1080" height="1080" /> </g> <g transform="matrix(1 0 0 1 540 540)" id="f0933fe9-3676-43bc-9a55-ce012bd5ed79" > </g> <g transform="matrix(3.83 0 0 3.83 342.3 366.29)" id="4807f659-641c-43ea-840b-e5cf5559004c" > <path style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(101,101,101); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-50, -50)" d="M 94.75 50 C 94.75 56.213 89.514 61.25 83.054 61.25 L 16.946 61.25 C 10.486 61.25 5.25 56.213 5.25 50 L 5.25 50 C 5.25 43.787 10.486 38.75 16.945999999999998 38.75 L 83.053 38.75 C 89.514 38.75 94.75 43.787 94.75 50 L 94.75 50 z" stroke-linecap="round" /> </g> <g transform="matrix(0.58 0 0 0.58 351.28 266.75)" style="" id="f015080a-ab49-42d6-ab91-8903fc060bf3" > <text xml:space="preserve" font-family="Lato" font-size="100" font-style="normal" font-weight="400" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-210.55" y="31.41" >Body text</tspan></text> </g> </svg>The output should be:
but it is:
So, the text is somehow misaligned....
-
I've tested Qt 6.3, 6.7 and the latest 6.8.1.
The QML is quite simple:
<?xml version="1.0" encoding="UTF-8" standalone="no" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1080" height="1080" viewBox="0 0 1080 1080" xml:space="preserve"> <desc>Created with Fabric.js 5.2.4</desc> <defs> </defs> <g transform="matrix(1 0 0 1 540 540)" id="dd1d958a-c7e5-4f47-b3e5-f1d714fce3fa" > <rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke" x="-540" y="-540" rx="0" ry="0" width="1080" height="1080" /> </g> <g transform="matrix(1 0 0 1 540 540)" id="f0933fe9-3676-43bc-9a55-ce012bd5ed79" > </g> <g transform="matrix(3.83 0 0 3.83 342.3 366.29)" id="4807f659-641c-43ea-840b-e5cf5559004c" > <path style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(101,101,101); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-50, -50)" d="M 94.75 50 C 94.75 56.213 89.514 61.25 83.054 61.25 L 16.946 61.25 C 10.486 61.25 5.25 56.213 5.25 50 L 5.25 50 C 5.25 43.787 10.486 38.75 16.945999999999998 38.75 L 83.053 38.75 C 89.514 38.75 94.75 43.787 94.75 50 L 94.75 50 z" stroke-linecap="round" /> </g> <g transform="matrix(0.58 0 0 0.58 351.28 266.75)" style="" id="f015080a-ab49-42d6-ab91-8903fc060bf3" > <text xml:space="preserve" font-family="Lato" font-size="100" font-style="normal" font-weight="400" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-210.55" y="31.41" >Body text</tspan></text> </g> </svg>The output should be:
but it is:
So, the text is somehow misaligned....
@FredJupiter Tested your SVG file with Qt 5.15.2 on Yocto. Same issue. I guess you can file a bug report.
-
