Find the x and y positions of a task in an Export SVG

Developers
1

I want to embed the export SVG in a document (eg HTML) and define the Task Elements as clickable areas.
To find the lower-left and higher-right corners x, y positions of the Task Elements, I am using the “transform=translate (x y)” to find the offset.
This seem not the good way to proceed.

I don’t understand how to proceed and if the properties width=“525” height=“194” and viewBox=“185 105 525 194” in the element svg should be exploited.

For information, my reference is the lower-left corner of the SVG drawing.

Many thanks in advance for your help.

Nicolas

2

May I ask why you don’t embed the diagram directly using bpmn-js? It exposes the full information.

The exported SVG is a by-product and its contents may change any time.

3

Thanks for your quick reply.

Our documentation is build using a web tool Calenco (https://www.calenco.com/en/index.html).

With this tool we publish our documents without worrying about the layout. It’s applied afterwards with one click, in all standard formats (PDF, HTML, ePUB, …).

The tool manages automatically the image sizing. Calenco is responsible for providing the correct resolution of the image according to the output format and allow to take advantage of the clickable image feature to energize our documents.

To solve this issue, we define the clikable area after the image sizing made by the tool when the siez is knwon.

It is true that would be easier if we can directly work using bpmn-js embeded in Calenco.

I contact the provider to see if it is feasable. Today the only way we have it is to import svg files.

Rgds,

Nicolas