Page 1 of 1

WebHelp Responsive - Hotspots on SVG responsive images

Posted: Tue Feb 02, 2021 9:45 pm
by dipocoker
I've been looking forward to using hotspots on SVG images.
Typical use case is a flowchart with hotspots taking you to the relevant xref.
The current implementation is a bit clunky and took a while to figure out how to make it work.
ISSUE:
The hotspots do not stay over the position once published. They are distributed in the order of the image map, but not over the spots they were supposed to cover.
The only way we have got it to work for now is to go back and edit the SVG by adding a width and height attribute to the SVG, AND also adding the width attribute to the image element in the dita topic.
This means you lose the "responsive" feature of the SVG.
The output is still scalable, but not sure how far on a mobile device, and it is a lot of faffing around for something that should work as it does in a PDF output.
See attachments
SVG_WidthHeightDefined2.gif
SVG_WidthHeightDefined2.gif (119.16 KiB) Viewed 2114 times
SVG_WidthHeightNOTDefined2.gif
SVG_WidthHeightNOTDefined2.gif (172.15 KiB) Viewed 2114 times
Also seems there's a bit of an issue with your fonts here, see the word ISSUE, the Ss are taller than the other letters :)

Re: WebHelp Responsive - Hotspots on SVG responsive images

Posted: Mon Jan 22, 2024 4:34 pm
by horisonten
Just chiming in that this is still an issue when transforming to html. It seems as if the image must be the correct size for the imagemap to work consistently. When setting the width and height it seems to move the imagemap so that the hotspots doesn't align with the actual image.

Re: WebHelp Responsive - Hotspots on SVG responsive images

Posted: Tue Jan 23, 2024 11:41 am
by Costin
Hi horisonten,

Could you please let us know which specific version of WebHelp did you use to test this functionality?
Also, in order to look into this, we would need you to send us a sample DITA Map files hierarchy in an as minimal form as possible which we could use to reproduce the reported behavior.
You could send the sample to our official support email: support@oxygenxml.com
Please refer this forum post in the email you will send.

Regards,
Costin