如何在 TWebBrowser 中居中和拉伸/收缩 SVG 显示？
Posted
技术标签:
【中文标题】如何在 TWebBrowser 中居中和拉伸/收缩 SVG 显示？【英文标题】：How to CENTER and STRETCH/SHRINK SVG display in TWebBrowser? 【发布时间】：2021-06-06 10:58:54 【问题描述】：在 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;
但是，图像仍然是左对齐并且没有缩小（并且不再有滚动条）：
【问题讨论】：
这是一个 HTML/CSS 问题。您应该制作一个按照您想要的方式进行渲染的 HTML 页面。 【参考方案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"
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"
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 ... viewBox="0 0 600 1050" ... >
【讨论】：
很好的例子。只是挑剔：HTML标签不应该是自封闭的。我知道这是常见的做法，但只有 XHTML 应该使用它们。 @Olivier：是的。我是 XML 的忠实粉丝，所以我倾向于这样做。但我认为所有符合 HTML5 的 UA 都需要处理带有自闭合标签的文档？ 根据this：“开始标签末尾的斜线是允许的，但没有意义。”所以看起来它确实是有效的HTML5。 查看我对问题的编辑：不幸的是，图像仍然是左对齐并且没有缩小。 您应该首先使用 IE 或 Edge 进行测试（取决于您的TWebBrowser 对象使用哪一个）。以上是关于如何在 TWebBrowser 中居中和拉伸/收缩 SVG 显示？的主要内容，如果未能解决你的问题，请参考以下文章