如何在运行时将 SVG 文档文本手动插入 TWebBrowser？答案

【问题标题】：How to insert an SVG document text manually into a TWebBrowser at run-time?如何在运行时将 SVG 文档文本手动插入 TWebBrowser？
【发布时间】：2021-06-10 19:24:50
【问题描述】：

在 Delphi 10.4.2 Win32 VCL 应用程序中，我需要在运行时手动将 SVG 文档插入到 TWebBrowser (wb1.SelectedEngine := IEOnly;)：

procedure TForm1.btnLoadSVGDocClick(Sender: TObject);
var
  Doc: Variant;
  slSVG: TStringList;
begin
  slSVG := TStringList.Create;
  try
    slSVG.LoadFromFile('C:\DELPHI\_test\BrowserSVGViewer\steamreactor.svg');
    // Todo: Make corrections to the SVG document text
    if NOT Assigned(wb1.Document) then
      wb1.Navigate('about:blank');
    Doc := wb1.Document;
    Doc.Clear;
    Doc.Write(slSVG.Text);
    Doc.Close;
    //wb1.Refresh;
  finally
    slSVG.Free;
  end;
end;

不幸的是，SVG 没有显示在TWebBrowser!我究竟做错了什么？我什至尝试过wb1.Refresh;，但它没有帮助。

【问题讨论】：

你真的需要一个 TWebBrowser 来显示 SVG 图像吗？也许你可以使用这个：github.com/EtheaDev/SVGIconImageList
@DelphiCoder 比较这个 SVG 文件的渲染：svgshare.com/s/Uzf 在 SVGIconImageList 和 Web 浏览器中。我做了比较：-{=
@user1580348 是对的。在 SVG 渲染方面，很少有库可以与现代 Web 浏览器竞争。也许没有。
“未显示 SVG” 有什么显示吗？
@Olivier：不，但是如果你查看源代码，你可以看到 SVG 文件。我认为 IE 控件需要编写纯 HTML。它不允许您以这种方式插入 XML SVG 文档。

标签： delphi svg twebbrowser delphi-10.4-sydney

【解决方案1】：

Internet Explorer 控件并非完全设计为动态提供内容。因此，我的标准方法是将我的内容保存到一个临时文件中：

type
  TForm1 = class(TForm)
    WebBrowser1: TWebBrowser;
    btnLoadSvg: TButton;
    procedure FormCreate(Sender: TObject);
    procedure FormDestroy(Sender: TObject);
    procedure btnLoadSvgClick(Sender: TObject);
  private
    FTempFiles: TList<TFileName>;
  public
  end;

implementation

uses
  IOUtils;

{$R *.dfm}

procedure TForm1.FormCreate(Sender: TObject);
begin
  FTempFiles := TList<TFileName>.Create;
end;

procedure TForm1.FormDestroy(Sender: TObject);
begin
  if Assigned(FTempFiles) then
    for var TempFile in FTempFiles do
      Winapi.Windows.DeleteFile(PChar(TempFile));
end;

procedure TForm1.btnLoadSvgClick(Sender: TObject);
begin

  var SvgText := TFile.ReadAllText('K:\flower.svg', TEncoding.UTF8);

  var TempFileName := ChangeFileExt(TPath.GetTempFileName, '.svg');
  FTempFiles.Add(TempFileName);
  TFile.WriteAllText(TempFileName, SvgText, TEncoding.UTF8);
  WebBrowser1.Navigate(TempFileName);

end;

这是健壮的。例如，即使用户在控件获得焦点时按 F5，文档仍然会存在。

【讨论】：

感谢您提供这个关于使用临时文件的非常好的和强大的示例！顺便说一句，有没有办法在不使用文件方法的情况下在运行时将 SVG 文档作为 HTML 文本手动插入到 TWebBrowser 中？
@user1580348：我尝试使用带有 base-64 编码的 SVG 数据 URI 的 IMG 标记加载 HTML 文档，但这不起作用。我们必须记住，IE 控件已有十年历史，并且是在二十年前设计的。这是相当遗产。即使它确实有效，如果用户的猫在动态加载的页面上不小心按了 F5，它也会消失。
不知道其他使用EDGE的Delphi浏览器控件从长远来看是否更健壮？
@user1580348：我从来没有让它正常工作。
@有猫用Delphi吗？

【解决方案2】：

您可以在 WebBrowser1 中加载一个空框架

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>SVG Frame</title>
  </head>
  <body>
    <svg>
    </svg>
  </body>
</html>

并通过设置 svg 标签的 outerHTML 来添加 SVG 代码，如下所示：

var
  Elem: IHTMLElement;
..
Elem := GetElementByTag(WebBrowser1.Document, 'svg');
Elem.outerHTML := slSVG.Text;

函数GetElementByTag应该定义如下：

function GetElementByTag(const Doc: IDispatch; const TagName: string): IHTMLElement;
var
  Document: IHTMLDocument2;     // IHTMLDocument2 interface of Doc
  Body: IHTMLElement2;          // document body element
  Tags: IHTMLElementCollection; // all tags in document body
  Tag: IHTMLElement;            // a tag in document body
  I: Integer;                   // loops thru tags in document body
begin
  Result := nil;
  // Check for valid document: require IHTMLDocument2 interface to it
  if not Supports(Doc, IHTMLDocument2, Document) then
    raise Exception.Create('Invalid HTML document');
  // Check for valid body element: require IHTMLElement2 interface to it
  if not Supports(Document.body, IHTMLElement2, Body) then
    raise Exception.Create('Can''t find <body> element');
  // Get all tags in body element ('*' => any tag name)
  if Tags.length > 0 then
    Result := Tags.item(0, EmptyParam) as IHTMLElement
  else
    raise Exception.Create('no <svg> element found!');
end;

您需要在uses语句中添加单元mshtml。

示例项目（Delphi 10.3.3）可以下载here

【讨论】：