SVG imagemap/clickable paths

[grimski]

Hi all,

I put this question on StackOverflow but I’m not having much luck so I thought I’d see if anyone else can help.

Basically I have graphic showing a pie chart. When a segment is clicked it should open a fancybox overlay. I tried using a image map map which functionally worked ok but I couldn’t apply any hover styles. And also the outer part of each segment, forming the circumference of the chart was jagged/made of straight lines which wasn’t great.

So I decided maybe a better approach would be to create an SVG with the pie chart segments (paths) on top of the graphic. This means the SVG paths now match the shapes on the pie chart exactly. Here is the code:

<figure class="align-center">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 760 580" xml:space="preserve" class="eatwell-plate">
        <image xlink:href="../../img/content/diagrams/eatwell-plate.png" x="0" y="0" height="580px" width="760px" />
        <path d="M251.9,456.4C287.4,483.7,331.8,500,380,500c11.8,0,23.3-1,34.6-2.8L380,290L251.9,456.4z" />
        <path d="M380,80c-116,0-210,94-210,210c0,67.8,32.1,128,81.9,166.4L380,290V80z" />
        <path d="M527.3,439.6C566,401.6,590,348.6,590,290c0-116-94-210-210-210v210L527.3,439.6z" />
        <path d="M380,290l129.3,165.5c6.3-4.9,12.3-10.2,18-15.8L380,290z" />
        <path d="M414.6,497.2c35.3-5.9,67.7-20.5,94.8-41.7L380,290L414.6,497.2z" />
    </svg>
</figure>

Now if I set a hover styling like `path:hover {fill: rgba(0,0,0,.25)} I can see the hover works great. Though it’s a shame I couldn’t apply an inset box-shadow – I guess that can’t be done?

The problem is now I can’t click on the paths to open the fancybox overlays. I’ve tried wrapping the path in an anchor, that works when the href is a URL but when it’s an ID matching the hidden div(s) it won’t fire and gives a console error Uncaught TypeError: element.prop(...).match is not a function. I’ve also tried adding an href to a path …that didn’t work, wishful thinking!!

So now I’m a bit stuck. I really need the hover styles so I don’t want to go back to an image map really.

It’s working noting I’m using Fancybox v2.1.5 . Apparently Fancybox v3 is out now and has some new features which should allow this to work but unfortunately I can’t upgrade. The current Fancybox JS file is used by 5 different apps (they all have 99% the same functionality) so updating that could break everything else.

Any ideas?

[grimski]

Added a CodePen: https://codepen.io/moy/pen/gxjaqN

Not sure why the Fancybox z-index isn’t working (it goes behind the overlay). But that’s not important, the buttons trigger the overlays and it displays correctly in my app. Just need to get the same triggers working on the pie chart segments!

[grimski]

I got some help with this on StackOverflow, I’m not sure if the user is on here but either way a big thanks to Janis! I thought I’d update the post here just incase anyone else has the same/similar question.

While I don’t fully understand it, the issue seemed to be based around “Strangely, jQuery prop(‘class’) returns object on svg elements, but fancyBox expects string”.

So as I normally load my Fancybox like this: $(".fancybox").fancybox({ FB OPTIONS HERE });

It was recommended I change the call to this, which seems to work great.

var fbOpts = {
    margin: [20,40,20,40],
    padding: [20,20,0,20],
    openEffect: 'fade',
    //openEasing: 'easeInQuad',
    openSpeed: 400,
    title: false,
    scrolling : 'no',       // turns off scrolling in box.
    fitToView : false,      // allows box to overflow out of viewport.
    autoSize: false,        // needs to be turned on for width/maxWidth to work.
    height: 'auto',         // if autoSize is set to 'false', this needs to be 'auto' so height matches content.
    width: '100%',
    minHeight: 0,
    maxWidth: 900,
    helpers: {
        overlay: {
          showEarly : false
        }
    }
};

$(document).ready(function() {

    $('.fancybox').on('click', function() {
        $.fancybox.open($.extend({}, fbOpts, {href : $(this).attr('href')}));
    });
});

As far as I can tell, this hasn’t broken what originally worked either, can anyone elaborate a little?

[Author]

Posts