Why my css3 hover effect doesn't work in SVG?

Question

I created this SVG and put in some inline CSS to create a hover effect but it doesn't work. The dashed circle doesn't move and rotate, it only changes opacity. In addition, there's no transition on mouse out like normal css transition. How can I fix this ?

.wrap:hover .dash {
   opacity: 0.2;
   transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
   transform: translateX(10px);
   -webkit-transform: translateX(10px);
   transform-origin: 50% 50%;
   -webkit-transform-origin: 50% 50%;
   transition: 0.3s linear;
}

The link to my code fiddle: http://jsfiddle.net/7s4vszu3/1/

Answer 1

There are a couple of issues here:

First, your transition and transform-origin should be set without the hover selector. This is the reason you weren't seeing the proper transition on mouse out. Second, you need to include both your transformations in the same rule, so that one doesn't overwrite the other. In your code, your translate is overwriting your rotate.

Here's what it should look like:

.wrap .dash {
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transition: transform 1s linear, opacity 1s linear;
}

.wrap:hover .dash {
    opacity: 0.2;
    transform: rotate(90deg) translateX(10px);
    -webkit-transform: rotate(90deg) translateX(10px);
}

Example here: http://jsfiddle.net/unc3re9b/