如何在 TWebBrowser 中居中和拉伸/收缩 SVG 显示？

Question

在 Windows 10 x64 上的 Delphi 10.4.2 Win32 VCL 应用程序中，我使用 TWebBrowser 组件来显示本地 SVG 文件。 TWebBrowser 组件具有以下属性：

object wb1: TWebBrowser
  Left = 0
  Top = 0
  Width = 936
  Height = 578
  Align = alClient
  TabOrder = 0
  SelectedEngine = EdgeIfAvailable
  ExplicitLeft = -214
  ExplicitTop = -61
  ExplicitWidth = 856
  ExplicitHeight = 483
  ControlData = {
    4C00000078580000EB3100000000000000000000000000000000000000000000
    000000004C000000000000000000000001000000E0D057007335CF11AE690800
    2B2E12620A000000000000004C0000000114020000000000C000000000000046
    8000000000000000000000000000000000000000000000000000000000000000
    00000000000000000100000000000000000000000000000000000000}
end

这里我加载一个本地 SVG 文件：

procedure TForm1.FormCreate(Sender: TObject);
begin
  wb1.Navigate('file:///\\Mac\Home\Downloads\test\Vector SVG 2.svg');
end;

SVG 文件的显示效果很好，但在TWebBrowser 客户区是左对齐，在@ 客户区是没有收缩/拉伸 987654330@客户专区：

那么如何使 SVG 文件图像在TWebBrowser 客户区居中，在TWebBrowser 客户区收缩/拉伸？

编辑：我听从了@AndreasRejbrand 的建议并创建了这个 HTML 页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<img src="Vector SVG 2.svg"
  style="position: absolute; top: 0; left: 0; width: 100%; height: 100%" />
</body>
</html>

这是“Vector SVG 2”SVG 文件的来源：太大，无法在此处插入

这是我加载 HTML 文件的地方：

procedure TForm1.FormCreate(Sender: TObject);
begin
  wb1.Navigate('file:///\\Mac\Home\Downloads\test\vector.html');
end;

但是，图像仍然是左对齐并且没有缩小（并且不再有滚动条）：

Answer 1

在某种程度上，这取决于 SVG 图像的属性。具体来说，它取决于其width、height、preserveAspectRatio 和viewBox 参数的值。

考虑以下示例：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
  width="650" height="650" viewBox="0 0 650 650">
<title>A flower</title>
<!-- Content -->
</svg>

这在TWebBrowser 中看起来像这样：

我们有多种选择。我们可以做的一件事是更改 SVG，使其没有固定大小：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
  width="100%" height="100%" viewBox="0 0 650 650">
<title>A flower</title>
<!-- Content -->
</svg>

结果：

另一种方法是创建一个包含 SVG 图像的最小 HTML5 页面。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<img src="test.svg"
  style="position: absolute; top: 0; left: 0; width: 100%; height: 100%" />
</body>
</html>

这是 SVG：https://privat.rejbrand.se/flower.svg。

如果 SVG 文件没有 viewBox 属性，则上述方法不起作用。一种解决方案——显然——是添加一个viewBox属性。例如，OP 的文件有width="600" height="1050"。通过添加viewBox="0 0 600 1050"，它变得可扩展：

<svg ... width="600" height="1050" viewBox="0 0 600 1050" ... >