Animiere ein <g> Element in SVG mit CSS

Question

In einem SVG habe ich eine <g class="building">, die ich gerne auf Hover nach oben bewegen würde.

<svg x="0px" y="0px" 
     viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve"> 
    <g class="building"> 
    <rect id="XMLID_1_" x="128.6" y="296.2"/> 
</g> 
    </svg> 

Wenn das ein <div class="building"> war, die CSS, die ich würde verwenden würde:

.building { 
position: relative; 
top: -20px; 
} 

Wie position und top funktioniert nicht in SVG, werde ich natürlich diese eine andere Art und Weise zu tun haben

Wie gehe ich nach oben <g class="building"> 20px?

Hier ist ein fiddle

Answer 1

Sie ein CSS-Transformation verwenden können, um es zu bewegen. Seien Sie vorsichtig, da Sie für g und rect die gleiche Klasse definiert haben. Vielleicht sollten Sie dies noch einmal überdenken.

\t .building{fill:#72B62B;stroke:#000000;stroke-miterlimit:10;} 
 
\t .ground{fill:#030203;stroke:#000000;stroke-miterlimit:10;} 
 
    
 
    .building:hover { 
 
    transform: translateY(-30px); 
 
    }

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve"> 
 
<g class="building"> 
 
<rect id="XMLID_2_" x="21.6" y="645" class="building" width="550" height="74.3"/> 
 
</g>

Answer 2

You dont need css to animate svg example heer: 
<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" /> 
<animate 
    xlink:href="#orange-circle" 
    attributeName="cx" 
    from="50" 
    to="450" 
    dur="5s" 
    begin="click" 
    fill="freeze" 
    d="circ-anim" />