WebHelp Responsive - Hotspots on SVG responsive images

dipocoker
Posts: 3
Joined: Fri Jan 19, 2018 12:03 pm

WebHelp Responsive - Hotspots on SVG responsive images

Post by dipocoker » Tue Feb 02, 2021 9:45 pm

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 291 times
SVG_WidthHeightNOTDefined2.gif
SVG_WidthHeightNOTDefined2.gif (172.15 KiB) Viewed 291 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 :)