Qt中QLabel加载SVG后文本重叠问题咨询

数据老陈

2026-6-17

问题

使用Qt 6.6.3在Windows 11系统下将SVG加载到QLabel中，实现代码如下：

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this); 
    DisplaySvgOnLabel();
}

void MainWindow::DisplaySvgOnLabel() {
    QSvgRenderer svg_renderer;

    bool isLoaded = svg_renderer.load(QString(R"(C:/.../map.svg)"));

    if (!isLoaded) {
        qDebug() << "Не удалось загрузить SVG файл.";
        return;
    }

    QSize label_size = ui->label->size();

    QPixmap pixmap(label_size);
    pixmap.fill(Qt::transparent);

    QPainter painter(&pixmap);
    svg_renderer.render(&painter, QRectF(10, 10, label_size.width() - 30, label_size.height() - 30));

    ui->label->setPixmap(pixmap);
}

对应的SVG内容：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="886.635,702 921.308,389.01 780.048,466.526 886.635,702" fill="none" stroke="green" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>
  <polyline points="921.308,389.01 780.048,466.526 40,40 780.048,466.526 921.308,389.01" fill="none" stroke="rgb(255,160,0)" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>
  <text fill="rgba(255,255,255,0.85)" stroke="rgba(255,255,255,0.85)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" x="886.635" y="702" dx="7" dy="17" font-size="20" font-family="Verdana" font-weight="bold">297</text>
  <text fill="green" x="886.635" y="702" dx="7" dy="17" font-size="20" font-family="Verdana" font-weight="bold">297</text>
  <text fill="rgba(255,255,255,0.85)" stroke="rgba(255,255,255,0.85)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" x="921.308" y="389.01" dx="7" dy="17" font-size="20" font-family="Verdana" font-weight="bold">635</text>
  <text fill="rgb(255,160,0)" x="921.308" y="389.01" dx="7" dy="17" font-size="20" font-family="Verdana" font-weight="bold">635</text>
  <text fill="rgba(255,255,255,0.85)" stroke="rgba(255,255,255,0.85)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" x="40" y="40" dx="7" dy="17" font-size="20" font-family="Verdana" font-weight="bold">635</text>
  <text fill="rgb(255,160,0)" x="40" y="40" dx="7" dy="17" font-size="20" font-family="Verdana" font-weight="bold">635</text>
  <circle cx="921.308" cy="389.01" r="5" fill="white"/>
  <circle cx="886.635" cy="702" r="5" fill="white"/>
  <circle cx="40" cy="40" r="5" fill="white"/>
  <circle cx="780.048" cy="466.526" r="5" fill="white"/>
  <text fill="rgba(255,255,255,0.85)" stroke="rgba(255,255,255,0.85)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" x="921.308" y="389.01" dx="7" dy="-3" font-size="20" font-family="Verdana">Biryulyovo Tovarnaya</text>
  <text fill="black" x="921.308" y="389.01" dx="7" dy="-3" font-size="20" font-family="Verdana">Biryulyovo Tovarnaya</text>
  <text fill="rgba(255,255,255,0.85)" stroke="rgba(255,255,255,0.85)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" x="886.635" y="702" dx="7" dy="-3" font-size="20" font-family="Verdana">Biryulyovo Zapadnoye</text>
  <text fill="black" x="886.635" y="702" dx="7" dy="-3" font-size="20" font-family="Verdana">Biryulyovo Zapadnoye</text>
  <text fill="rgba(255,255,255,0.85)" stroke="rgba(255,255,255,0.85)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" x="40" y="40" dx="7" dy="-3" font-size="20" font-family="Verdana">Prazhskaya</text>
  <text fill="black" x="40" y="40" dx="7" dy="-3" font-size="20" font-family="Verdana">Prazhskaya</text>
  <text fill="rgba(255,255,255,0.85)" stroke="rgba(255,255,255,0.85)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" x="780.048" y="466.526" dx="7" dy="-3" font-size="20" font-family="Verdana">Universam</text>
  <text fill="black" x="780.048" y="466.526" dx="7" dy="-3" font-size="20" font-family="Verdana">Universam</text>
</svg>

加载后SVG中的数字出现文本重叠，但在浏览器中显示正常，询问原因。

原因与解决方案

原因

QSvgRenderer文本渲染逻辑差异：你的SVG中，白色描边文本和彩色填充文本是两个独立<text>元素。浏览器会将白色描边视为彩色文本的轮廓，视觉上合并为一层；但Qt的QSvgRenderer会将两个独立文本元素完全重叠渲染，导致看起来内容重复。
缺少viewBox属性：SVG未定义viewBox，浏览器会自动适配内容边界，但QSvgRenderer缩放渲染时无法正确计算元素位置和比例，加剧文本布局偏移重叠。

解决方案

合并重复文本元素
将两个重叠的<text>合并为一个，用单个元素同时设置填充色和描边，避免重复渲染。例如修改数字文本：
```
<text fill="green" stroke="rgba(255,255,255,0.85)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" x="886.635" y="702" dx="7" dy="17" font-size="20" font-family="Verdana" font-weight="bold">297</text>
```
站点名称文本同理，合并后Qt与浏览器渲染效果一致。
添加SVG的viewBox属性
在<svg>标签中添加viewBox，明确内容范围，帮助渲染器计算正确比例：
```
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 750">
```
数值可根据SVG元素的最大坐标调整（示例中元素最大x约921，最大y约702，0 0 1000 750足够覆盖）。

调整代码中的渲染逻辑
若不想修改SVG，可在代码中保持SVG原有比例渲染，避免强制拉伸：

QSize svg_size = svg_renderer.defaultSize();
QSize scaled_size = svg_size.scaled(label_size - QSize(20,20), Qt::KeepAspectRatio);
svg_renderer.render(&painter, QRectF(10,10, scaled_size.width(), scaled_size.height()));

内容的提问来源于stack exchange，提问作者nnn

Qt中QLabel加载SVG后文本重叠问题咨询

问题 #

原因与解决方案 #

原因 #

解决方案 #

问题

原因与解决方案

原因

解决方案