如何在TWebBrowser中进行CENTER和STRETCH/SHRINK SVG显示? [英] How to CENTER and STRETCH/SHRINK SVG display in TWebBrowser?
问题描述
在Windows 10 x64上的Delphi 10.4.2 Win32 VCL应用程序中，我使用 TWebBrowser 组件显示本地SVG文件. TWebBrowser 组件具有以下属性:
对象wb1:TWebBrowser左= 0上层= 0宽度= 936身高= 578对齐= alClientTabOrder = 0SelectedEngine = EdgeIfAvailable显式左= -214明确的顶端= -61显式宽度= 856明确的高度= 483ControlData = {4C00000078580000EB3100000000000000000000000000000000000000000000000000000000000000004C000000000000000000000000000001000000E0D057007335CF11AE6908002B2E12620A000000000000004C0000000114020000000000C000000000000046800000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000}结尾 我在这里加载本地SVG文件:
过程TForm1.FormCreate(Sender:TObject);开始wb1.Navigate('file:///\\ Mac \ Home \ Downloads \ test \ Vector SVG 2.svg');结尾; SVG文件的显示效果非常好，但是在 TWebBrowser 客户区域中左对齐，并且未收缩/拉伸 TWebBrowser 客户区域中的strong>:
因此，如何使SVG文件图像在 TWebBrowser 客户区域中居中，并在 TWebBrowser中缩小/拉伸客户区?
编辑:我已遵循@AndreasRejbrand的建议并创建了以下HTML页面:
<！DOCTYPE html>< html>< head><元字符集="utf-8"；http-equiv =与X-UA兼容"content ="IE = edge"/></head><身体>< img src =矢量SVG 2.svg"样式=位置:绝对；最高:0;左:0；宽度:100％;高度:100％"/></body></html> 这是"Vector SVG 2"的来源.SVG文件:太大，无法在此处插入
这是我加载HTML文件的位置:
过程TForm1.FormCreate(Sender:TObject);开始wb1.Navigate('file:///\\ Mac \ Home \ Downloads \ test \ vector.html');结尾; 但是，图像仍然保持左对齐且没有缩小(并且不再具有滚动条):
在某种程度上，这取决于SVG图像的属性.具体来说，它取决于其 width ， height ， preserveAspectRatio 和 viewBox 参数的值.
请考虑以下示例:
<?xml version ="1.0"encoding ="UTF-8"standalone =否"?< svg xmlns =" http://www.w3.org/2000/svg"xmlns:xlink =" http://www.w3.org/1999/xlink"；版本="1.1"宽度="650"高度="650"viewBox ="0 0 650 650">< title>一朵花</title><！-内容-></svg> 在 TWebBrowser 中看起来像这样:
我们有几种选择.我们可以做的一件事是更改SVG，使其没有固定的大小:
<?xml version ="1.0"encoding ="UTF-8"standalone =否"?< svg xmlns =" http://www.w3.org/2000/svg"xmlns:xlink =" http://www.w3.org/1999/xlink"；版本="1.1"宽度="100％"高度="100％"viewBox ="0 0 650 650">< title>一朵花</title><！-内容-></svg> 结果:
另一种方法是创建一个包含SVG图片的最小HTML5页面.
<！DOCTYPE html>< html>< head>< meta http-equiv =与X-UA兼容"；content ="IE = edge"/></head><身体>< img src ="test.svg"样式=位置:绝对；最高:0;左:0；宽度:100％;高度:100％"/></body></html>
这是SVG:
In a Delphi 10.4.2 Win32 VCL Application on Windows 10 x64, I use a TWebBrowser component to display local SVG files. The TWebBrowser component has these properties:
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
Here I load a local SVG file:
procedure TForm1.FormCreate(Sender: TObject);
begin
wb1.Navigate('file:///\\Mac\Home\Downloads\test\Vector SVG 2.svg');
end;
The display of the SVG file is very nice, but it is left-aligned in the TWebBrowser client area and it is not shrinked/stretched in the TWebBrowser client area:
So how can I make the SVG file image be centered in the TWebBrowser client area and shrinked/stretched in the TWebBrowser client area?
EDIT: I have followed the advice of @AndreasRejbrand and created this HTML page:
<!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>
This is the source of the "Vector SVG 2" SVG file: Too large to insert here
And this is where I load the HTML file:
procedure TForm1.FormCreate(Sender: TObject);
begin
wb1.Navigate('file:///\\Mac\Home\Downloads\test\vector.html');
end;
However, the image is still left-aligned and not shrinked (and has no scrollbars anymore):
To some extent this depends on the properties of the SVG image. Specifically, it depends on the values of its width, height, preserveAspectRatio, and viewBox parameters.
Consider the following example:
<?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>
This looks like this in the TWebBrowser:
We have several options. One thing we can do is change the SVG so it doesn't have a fixed size:
<?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>
Result:
Another approach is to create a minimal HTML5 page containing the SVG image.
<!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>
Here's the SVG: https://privat.rejbrand.se/flower.svg.
If the SVG file doesn't have a viewBox attribute, the approach above doesn't work. One solution -- obviously -- is then to add a viewBox attribute. For example, the OP's file has width="600" height="1050". By adding viewBox="0 0 600 1050" it becomes scalable:
<svg ... width="600" height="1050" viewBox="0 0 600 1050" ... >
这篇关于如何在TWebBrowser中进行CENTER和STRETCH/SHRINK SVG显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
