CSS transforms on SVG elements

by Fiddel

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<button class="test">test rotate</button>
      <div class="wrapper">
         <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            viewBox="83 0 671 754" enable-background="new 83 0 671 754" xml:space="preserve" >
            <g class="germany">
               <path fill="#CCCCCC" d="M668.031,380.624c0,0,0.37-5.463,0.078-5.694c-0.295-0.229-2.266-3.216-2.131-3.737
                  c0.141-0.522-2.17-6.061-2.17-6.061l-1.603-0.852l-3.487-1.931l-1.102-2.081l-2.479-1.547l-0.933-1.538
                  c0,0-1.077,0.051-2.222,0.114c0.164-0.176,0.27-0.287,0.303-0.295l0.479-0.205c-0.471-1.089-0.939-2.74,0.039-3.61
                  c1.542-1.368,1.334-1.383,2.014-2.181c0.671-0.794,2.62-1.926,2.271-3.007c-0.339-1.081,1.271-0.332-0.339-1.081
                  c-1.6-0.745-4.565-2.849-4.565-2.849s-1.519-2.009-1.671-2.864c-0.146-0.853-1.134-1.553-1.697-2.438
                  c-0.557-0.887-0.707-1.742-0.391-3.408c0.324-1.662,2.924-6.339,2.924-6.339l4.272-4.978c0,0-0.703-4.903-0.659-5.533
                  c0.047-0.632-0.263-2.131-0.414-2.985c-0.149-0.853-1.773-4.343-1.773-4.343l-1.299-2.207c0,0,0.858-3.524,0.739-4.797
                  c-0.117-1.275-0.362-3.828-0.362-3.828l-4.626-4.967l-1.705-5.396c0,0-1.253-2.833-1.604-3.7
                  c-0.357-0.868-0.639-2.788,0.227-3.358c0.864-0.575,2.628-2.142,2.628-2.142l1.803-2.194l0.498-4.188l-3.382-5.092l-6.545-7.209
                  c0,0-1.015-0.287-2.5-2.92c-1.473-2.639-2.483-6.084-2.483-6.084l-4.113-3.451l-3.989-2.181c0,0-1.784-1.179-2.153-1.84
                  c-0.369-0.658-3.795,1.003-1.666-2.858c2.124-3.859,2.3-3.427,2.388-4.688c0.086-1.264-0.199-3.181,0.34-5.045
                  c0.546-1.86,2.555-4.041,2.555-4.041l5.839-3.604l4.095-5.413c0,0,2.196-1.75,0.716-4.384c-1.48-2.636-1.584-4.118-2.161-4.794
                 ...

CSS

body,html {height:100%}
.wrapper {
  width:100%;
  height:100%;
}


g.arrows.polygons {
  stroke:green;
  stroke-width:7px;
}

g.arrows.polygons g.arrow{
  fill:lime;
}

g.arrows.paths{
  stroke:blue;
  stroke-width:7px;
}
	
.rotate {
  transform: rotate(-180deg);
  transform-origin: center;
  transform-style: preserve-3D;
  transition: transform 2s ease-out;
}


button.test {
  display: block;
  margin: auto;
}

JavaScript

$('button.test').click(function () {
         
          $('.arrow').toggleClass('rotate');
         
         });