SVG 文本不正确重叠

Question

我正在尝试将我的 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>

但是上传成功后，我的号码被文字重叠了：

但是如果我在浏览器中打开绘图，文本会根据需要显示，不会重叠：

为什么会出现这种情况？

我在 Windows 11 上使用 Qt 6.6.3。

Answer 1

相当多的 svg 渲染器垂直对齐文本，因为默认对齐是自动的，

dx

/

dy

不受尊重。可能的解决方案是使用与

auto

不同的显性基线，例如

mathematical

或正确对齐：

<svg xmlns="http://www.w3.org/2000/svg">
    <text x="50" y="50" dominant-baseline="text-after-edge">297</text>
    <text x="50" y="50" dominant-baseline="text-before-edge">TEXT</text>
</svg>