如何在TWebBrowser中居中和拉伸/收缩SVG显示？
在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工作区中是左对齐的，并且在TWebBrowser工作区中没有收缩/拉伸：
那么如何使SVG文件图像在TWebBrowser工作区居中，并在TWebBrowser工作区收缩/拉伸呢？
共有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 charset="utf-8" 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>
-
问题内容： 我有一个要在div中居中的SVG。div的宽度为900px。SVG的宽度为400像素。SVG的margin-left和margin- right设置为auto。不起作用，它的作用就像是左边距为0（默认值）。 有人知道我的错误吗？ 问题答案： SVG默认为内联。添加到它，然后将按预期工作。
-
问题内容： 我试图用flex框将内容垂直居中，但没有成功。我不喜欢使用或因为它不是固定大小。我的代码有什么问题？ 问题答案： 您的伸缩容器没有多余的高度。唯一的高度是内容的高度。因此，没有用于垂直居中的空间。 第一步，增加一些高度： 第二步，删除不必要的规则，其中一些规则会阻止垂直对齐。
-
问题内容： 有没有一种方法可以使CSS背景拉伸或缩放以填充其容器？ 问题答案： 对于现代浏览器，您可以使用以下命令完成此操作： 表示垂直或水平拉伸图像，因此它永远不会平铺/重复。 适用于Safari3（或更高版本），Chrome，Opera10 +，Firefox 3.6+和Internet Explorer 9（或更高版本）。 要使其与较低版本的Internet Explorer一起使用，请尝试
-
问题内容： 我需要伸展黄色的孩子来填补父母的所有身高。无需设置父级高度。父级的高度应取决于蓝色的子级文本。 问题答案： 使用Flexbox时，主要错误是开始全面使用。 在很多情况下，我们已经习惯了这一点，尽管谈到Flexbox时，它通常会破坏它。 解决方案很简单，只需删除，它将自动运行。 它的原因，是 柔性的项目 在 行 方向（默认），控制垂直行为，并作为其默认的是这只是工作原样。 堆栈片段
-
示例：http://www.studentbridges.org/new/ 我试图使我的导航栏横跨网页顶部，我得到了导航的div横跨网页，但是当我把导航菜单放在div里面时，下拉停止工作，并且链接不是居中的，不管我做什么（text-align：在CSS中的居中和标题中的标记不起作用）。 下面是我的代码： 导航 顶部导航分区： 任何关于问题可能是什么的投入将非常感谢！ HTML：
-
我知道这个问题已经问过，但我看到的解决方案对我不起作用。我有下面的代码，但正如你所看到的，文本不在圆圈的中间 null null