C++ 使用Qt QPainter和QSvgGenerator创建的SVG裁剪为视口大小

对于一个项目，我使用QPaint和QSvgGenerator创建SVG作为输出。该项目基本上从C++代码中生成基本类图。但是，当我使用Google Chrome或任何其他web浏览器打开SVG时，它会根据浏览器窗口的大小进行剪裁，而没有任何滚动条。调整窗口大小时，会进行进一步的剪裁

相关代码

QSvgGenerator temp_img; 
//Save file as image
QString path = QFileDialog::getSaveFileName(w, ("Save as image"), "", 
("SVG file (*.svg)"));

if (path.isEmpty())
    return;

temp_img.setFileName(path);

QPainter painter;
painter.begin(&temp_img);
painter.setFont(QFont("Arial",12));
.
.
.
painter.end();

我尝试过使用setViewBox（），但没有效果。 我是第一次使用Qt，所以请尽量详细说明。由于质量问题，我更喜欢SVG而不是位图

---

编辑：缩小显示隐藏的部分。

由于OP没有提供一个，我自己准备了一个：

#include <QtWidgets>
#include <QtSvg/QSvgGenerator>

const int w = 100, h = 100;

void renderTest(QPainter &qPainter, double s)
{
  qPainter.setTransform(QTransform().scale(s, s));
  qPainter.setFont(QFont("Arial", 12));
  qPainter.setPen(Qt::gray);
  qPainter.drawRect(0, 0, w, h);
  qPainter.setPen(Qt::black);
  qPainter.drawLine(0.1 * w, 0.5 * h, 0.9 * w, 0.5 * h);
  qPainter.drawLine(0.5 * w, 0.1 * h, 0.5 * w, 0.9 * h);
  qPainter.drawLine(0.45 * w, 0.2 * h, 0.55 * w, 0.2 * h);
  qPainter.drawLine(0.45 * w, 0.8 * h, 0.55 * w, 0.8 * h);
  qPainter.drawLine(0.2 * w, 0.45 * h, 0.2 * w, 0.55 * h);
  qPainter.drawLine(0.8 * w, 0.45 * h, 0.8 * w, 0.55 * h);
  qPainter.drawText(QPointF(0.51 * w, 0.49 * h), "0");
  qPainter.drawText(QPointF(0.51 * w, 0.79 * h), "-1");
  qPainter.drawText(QPointF(0.51 * w, 0.19 * h), "+1");
  qPainter.drawText(QPointF(0.21 * w, 0.49 * h), "-1");
  qPainter.drawText(QPointF(0.81 * w, 0.49 * h), "+1");
  qPainter.setPen(Qt::blue);
  qPainter.drawEllipse(QPointF(0.5 * w, 0.5 * h), 0.3 * w, 0.3 * h);
}

void renderSvgFile(const QString &qFilePath, double s)
{
  QSvgGenerator qSvgGen;
  qSvgGen.setFileName(qFilePath);
  qSvgGen.setSize(QSize(s * w, s * h));
  renderTest(QPainter(&qSvgGen), s);
}

int main(int argc, char **argv)
{
  qDebug() << "Qt Version:" << QT_VERSION_STR;
  QApplication app(argc, argv);
  // render tests
  for (int i = 1; i <= 100; i *= 10) {
    const QString qFilePath = QString("testQSvgGen.%1%2.svg").arg(i).arg("0%");
    qDebug() << "Render" << qFilePath;
    renderSvgFile(qFilePath, i * 0.1);
  }
  // done
  return 0;
}

• 在

  testQSvgGen.100%.svg

• 在

  testQSvgGen.100%.svg

仔细查看生成的SVG代码发现，这3个文件总体上看起来非常相似。我强迫的缩放

  qPainter.setTransform(QTransform().scale(s, s));

要将图形输出调整为所需的图像大小，只需将其转换为一个属性，并对每个组进行缩放（

）

---

因此，我无法确认OP投诉的内容：

在生成的SVG文件中考虑在

QSvgGenerator:：setSize（）

中设置的大小，浏览器尊重此设置（如预期）

---

生成的

testQSvgGen.10%.svg的源代码

：

Qt-SVG文档
用Qt生成
0
-1
+1
-1
+1

对于独立的SVG，大小或视图框的规格都是必不可少的

W3C在SVG规范中对此进行了描述：

SVG用户代理与其父用户代理协商，以确定SVG用户代理可以将文档渲染到的视口。在某些情况下，SVG内容将嵌入（通过引用或内联）包含的文档中。此包含文档可能包括属性、属性和/或其他参数（显式或隐式），这些参数指定或提供有关SVG内容的视口维度的提示。SVG内容本身可以通过“SVG”元素上的“宽度”和“高度”XML属性提供关于内容的适当视口区域的信息。协商过程使用包含文档和SVG内容本身提供的任何信息来选择视口位置和大小

如果父文档格式定义了引用或嵌入图形内容的规则，则协商过程由父文档格式规范确定。如果父文档采用CSS样式，那么协商过程必须遵循替换元素的CSS规则。如果引用元素（或内联svg内容的最根“svg”元素）上的CSS宽度和高度属性（或相应的XSL属性）足以确定视口的宽度和高度，则这些定位属性将确定视口的宽度、高度和纵横比

如果没有父文档，SVG用户代理必须使用最根的“SVG”元素上的“宽度”和“高度”属性作为视口的宽度和高度

请注意，完成视口大小协商的时间是特定于实现的。需要确定视口尺寸的作者应使用加载事件或调整大小事件处理程序

我举了一些例子来说明这一点

不带

宽度

、

高度

和

视图框

–

test.svg

的测试文件：

SVG测试
说明宽度和高度作用的测试

Google Chrome中的输出：

[！[谷歌浏览器中test.svg的快照][1][1]

[！[Google Chrome中test.svg的快照（调整大小后）][2][2]

Firefox中的输出：

[！[Firefox中test.svg的快照][3][3]

虽然浏览器似乎渲染正确，但图形大小没有得到正确考虑。（尽管SVG内容不适合视图，但不会显示垂直滚动条。）

提供一个查看端口（

width

和

height

）–

test.100x100.svg

：

SVG测试
说明宽度和高度作用的测试

Google Chrome中的输出：

[！[test.100x100.svg在Google Chrome中的快照][4][4]

[！[test.100x100.svg在Google Chrome中的快照（调整大小后）][5][5]

同一个文件具有减小的

宽度

和

高度

–

test.50x50.svg

：

SVG测试
说明宽度和高度作用的测试

Google Chrome中的输出：

[！[test.50x50.svg在Google Chrome中的快照][6][6]

初始视图大小将减小

图形输出根据

宽度

和

高度

进行剪裁

接下来，我添加了一个

viewBox

属性–

test.50x50.view100x100.svg

：

SVG测试
说明宽度和高度作用的测试

Google Chrome中的输出：

[！[test.50x50.view100x100.svg在谷歌浏览器中的快照][7][7]

视图仍会缩小，但图形内容会缩放以适合视图

当

宽度

和

高度

缺失时会发生什么情况<代码>测试.view100x100.svg：

SVG测试
说明宽度和高度作用的测试

Google Chrome中的输出：

[！[谷歌浏览器中test.view100x100.svg的快照][8][8]

[！[谷歌浏览器中test.view100x100.svg的快照（调整大小后）][9][9]

将缩放输出以适应浏览器视图

这可以编译为以下拇指规则：

viewBox

为图形内容定义了类似剪辑空间的内容