Click event on an SVG

Question

Click event on an SVG

Navigation

#1 by (2 votes)

3

I have a map of Brazil, in an SVG, where I would like to present a div to each state when clicking on it.

I managed to work with color change with hover using ID of each state of Brazil:

function highlight_map_states(){
  if($(".states_section").length>0){
     $(".states_section .list_states .item .link").hover(function(){
       var a="#state_"+$(this).text().toLowerCase();
       $(a).attr("class","state hover")
     },function(){
       var a="#state_"+$(this).text().toLowerCase();
       $(a).attr("class","state")
     })
  }
};

How do I get a click on each state to make a div appear?

Note: You can not put all the code here because the question has a maximum character size, but there's a demo on Codepen .

javascript jquery svg onclick

asked by anonymous 13.04.2015 / 23:53

1 answer

Clear contents of my netbeans console in java What errors trigger the catch? [duplicate]

score 2 · Accepted Answer

What you're looking for is the method getBoundingClientRect() that you will return an object ClientRect with the distance in pixels for top , right , bottom and left .

The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.

The return value is of type float , but you can make use of it directly in the CSS properties for the element to position.

Example `hover`

Example of the mouse passing over a path , where <div/> appears next to it:

var $toolTip = $('.tooltip');

$('path').hover(function(){

    var t = this.getBoundingClientRect().top,   // distancia do topo
        l = this.getBoundingClientRect().left;  // distancia da esquerda

    $toolTip .css({
        "top": t + "px",
        "left": l + "px"
    }).show();

}, function(){
    $toolTip.hide();
});

See full demo at JSFiddle .

Example `click`

Example of clicking on a path or circle to make <div/> appear next to the clicked element:

// Faz aparecer elemento junto da path ou circle que recebeu o clique
$('path, circle').click(function(e){
    e.preventDefault();

    var t = this.getBoundingClientRect().top,
        l = this.getBoundingClientRect().left;

    $tooltip.css({
        "top": t + "px"
        "left": l + "px"
    }).show();
});

// Desabilita clique nas descrições e textos
$('desc, text').click(function(e){
    e.preventDefault();
});

See full demo at JSFiddle .

I can not set up a demonstration here because the maximum of characters in the response is 30000.

Click event on an SVG

1 answer

Example hover

Example click

Example `hover`

Example `click`