How to zoom SVG to a SVG element in TCppWebBrowser ?

[Rolf Fankhauser 1]

In my application I generate a SVG graphic in a TCppWebBrowser by providing GraphViz dot language code that is converted to SVG by a JavaScript version of GraphViz viz.js.

File _test.html shows the original HTML page (dot code and JavaScript code) that produces the SVG output shown in file test.html.

In the form with the TCppWebBrowser component I added some buttons to zoom in, out and reset to 100%:

//---------------------------------------------------------------------------
void __fastcall TFormViewer::btZoomInClick(TObject *Sender)
{
   ZoomFactor *= 1.1;
   OleVariant ZoomFac = int(ZoomFactor);
   CppWebBrowser1->ExecWB(63, OLECMDEXECOPT_DONTPROMPTUSER, ZoomFac, 0);
}
//---------------------------------------------------------------------------

void __fastcall TFormViewer::btZoomOutClick(TObject *Sender)
{
   ZoomFactor *= 0.9;
   OleVariant ZoomFac = int(ZoomFactor);
   CppWebBrowser1->ExecWB(63, OLECMDEXECOPT_DONTPROMPTUSER, ZoomFac, 0);
}
//---------------------------------------------------------------------------
//
void __fastcall TFormViewer::btResizeClick(TObject *Sender)
{
   ZoomFactor = 100;
   OleVariant ZoomFac = int(ZoomFactor);
   CppWebBrowser1->ExecWB(63, OLECMDEXECOPT_DONTPROMPTUSER, ZoomFac, 0);
}

This works fine but for huge networks with hundreds of elements I would like to zoom to a specific element by name (in test.html e.g. to "HE M15".  My idea is to change the viewBox attribute of the svg object. So, I need to find the element with the specific name (e.g. "HE M15"), read the x, y coordinates of the text and change the viewBox accordingly.

Would this be possible by IHTMLWindow2::execScript (JavaScript code) or other tools to access the DOM...

or would it be easier to save the html page, load it in a StringList, search the element and coordinates there and change the viewBox attribute, save the file and load it into the TCppWebBrowser component again?

 

__test.html

test.html