在SVG中使用CSS創建動畫元素<g>

在SVG中，我有一個<g class="building">，我希望在懸停時向上移動。在SVG中使用CSS創建動畫元素<g>

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

如果是<div class="building">，我會使用CSS將是：

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

由於position和top在SVG不工作，我會顯然有這樣做的另一種方式

如何向上移動<g class="building"> 20px？

這裏有一個fiddle

來源

2016-04-16 Adam Scot

現場演示，請 – Pedram

https://jsfiddle.net/8ynbyfLe/#&togetherjs=K32rqVxH1i –

您可以使用CSS變換來移動它。要小心，因爲你已經爲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>

來源

2016-04-16 11:04:00

-1

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

來源

2016-04-16 11:00:10

在SVG中使用CSS創建動畫元素<g>

回答

相關問題