如何在 TWebBrowser 中居中和 STRETCH/SHRINK 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 客户区左对齐并且不是shrinked/stretched在TWebBrowser客户区：

那么如何让SVG文件图像在TWebBrowser客户区居中并且shrinked/stretched 在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" ... >

如何在 TWebBrowser 中居中和 STRETCH/SHRINK SVG 显示？

How to CENTER and STRETCH/SHRINK SVG display in TWebBrowser?

html

delphi

svg

twebbrowser

delphi-10.4-sydney