の要素をSVGでCSSに変換する

Question

SVGには、ホバリングで上に移動したいと考えている<g class="building">があります。 <div class="building">た場合

<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> 

、私が使用したいCSSは次のようになります。positionとtopとして

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

SVGでは動作しません、私は明らかにこの別の方法を行う必要があるでしょう

<g class="building"> 20pxに移動するにはどうすればよいですか？ここで

は、あなたがそれを動かすためにCSS変換を使用することができますfiddle

Answer 1

です。あなたはgとrectのために定義された同じクラスを持っているので注意してください、あなたはそれを再考したいかもしれません。

\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" />