Transform Scale does not work with expected

Question

I want to increase the size of a certain part of the chart when passing with the mouse (Hover). I tried Transform but it doesn’t work very well for me.

example: http://jsfiddle.net/tttxfvcu/10/

Answer 1

You must use the property transform-origin, note that it is necessary to define transform in the element without :hover, for the browser to undo the effect.

As per @Gabrieloshiro’s response, you can add compatibility to older browsers for the transform-origin also (when these properties were experimental using the prefix -moz and -webkit)

I recommend reading: Prefixes need to be added to some CSS properties?

Example:

path {
          -moz-transform: scale(1.0);
       -webkit-transform: scale(1.0);
            -o-transform: scale(1.0);
               transform: scale(1.0);
        transform-origin: center center;
   -moz-transform-origin: center center;
-webkit-transform-origin: center center;
}


path:hover {
          opacity: 0.8;
   -moz-transform: scale(1.1); 
-webkit-transform: scale(1.1);
     -o-transform: scale(1.1);
        transform: scale(1.1);
}

You can also add an animated effect using transition, example:

#test {
        background-color: #f00;
                   width: 100px;
                  height: 100px;
          -moz-transform: scale(1.0);
       -webkit-transform: scale(1.0);
            -o-transform: scale(1.0);
               transform: scale(1.0);
        transform-origin: center center;
   -moz-transform-origin: center center;
-webkit-transform-origin: center center;
         -moz-transition: transform 0.5s ease;
      -webkit-transition: transform 0.5s ease;
              transition: transform 0.5s ease;
}

#test:hover {
          opacity: 0.8;
   -moz-transform: scale(1.1); 
-webkit-transform: scale(1.1);
     -o-transform: scale(1.1);
        transform: scale(1.1);
}

<div id="test"></div>

z-index and SVG

SVG does not change position with z-index, then as this response from Soen it is necessary to do the javascript process to reposition, using el.parentNode.appendChild(el);, the problem is that Raphael.js works in different ways in each browser, so we will have to use the available functions for it instead of CSS.

• Raphael.toFront will make the effect z-index
• Raphael.animate will make the effect similar to the CSS

Example:

function efeitoHover(el) {
    el.mouseover(function () {
        el.toFront().animate({'opacity': '0.8', 'transform':"s1.1 1.1"}, 100);
    }).mouseout(function () {
        el.stop().animate({'transform': ""}, 50, "bounce");
    });
}

window.onload = function() {
    var data = [5,10,20,40,80,160,100];

    var color = ["red", "green", "blue", "yellow", "pink", "gray","black"];

    var paper, arc;

    var sectorAngleArr = [];
    var total = 0;
    var startAngle = 0;
    var endAngle = 0;
    var x1, x2, y1, y2 = 0;

    paper = Raphael("holder"); //circle

    for (var k = 0; k < data.length; k++) {
        total += data[k];
    }

    for (var i = 0; i < data.length; i++) {
        var angle = Math.ceil(360 * data[i] / total);
        sectorAngleArr.push(angle);
    }

    drawArcs();

    function drawArcs() {
        for (var i = 0; i < sectorAngleArr.length; i++) {
            startAngle = endAngle;
            endAngle = startAngle + sectorAngleArr[i];

            if(i == sectorAngleArr.length - 1) {  
                endAngle = 0;
            }

            x1 = parseInt(Math.round(200 + 195 * Math.cos(Math.PI * startAngle / 180)));
            y1 = parseInt(Math.round(200 + 195 * Math.sin(Math.PI * startAngle / 180)));

            x2 = parseInt(Math.round(200 + 195 * Math.cos(Math.PI * endAngle / 180)));
            y2 = parseInt(Math.round(200 + 195 * Math.sin(Math.PI * endAngle / 180)));

            var d = "M200,200  L" + x1 + "," + y1 + "  A195,195 0 " + ((endAngle - startAngle > 180) ? 1 : 0) + ",1 " + x2 + "," + y2 + " z";

            arc = paper.path(d);
            arc.attr("fill", color[i]);
            arc.attr("title", "Valor: "+data[i]);
            efeitoHover(arc);//Aplica o efeito
        }
        //clear arrays
        data = [];
        color = [];
        sectorAngleArr = [];
    }
};

#holder {
    height: 400px;
    width: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<div id="holder"></div>