WebHelp Responsive - Hotspots on SVG responsive images
WebHelp Responsive - Hotspots on SVG responsive images
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
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 
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 (119.16 KiB) Viewed 1144 times
- SVG_WidthHeightNOTDefined2.gif (172.15 KiB) Viewed 1144 times
Dipo Coker