Html 为a<；g>；使用CSS实现SVG中的元素

在SVG中，我有一个

，我想在悬停时向上移动

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

由于

position

和

top

在SVG中不起作用，我显然不得不用另一种方法来实现这一点

如何向上移动

20px

下面是一个

不需要css来制作svg动画的示例：

您不需要css来制作svg动画示例：

您可以使用CSS转换来移动它。小心，因为已经为g和rect定义了相同的类，所以可能需要重新考虑

.building{fill:#72B62B；stroke:#000000；stroke miter:10；}
.ground{fill:#030203；stroke:#000000；stroke miter:10；}
.建筑物：悬停{
转换：translateY（-30px）；
}

---

您可以使用CSS转换来移动它。小心，因为已经为g和rect定义了相同的类，所以可能需要重新考虑

.building{fill:#72B62B；stroke:#000000；stroke miter:10；}
.ground{fill:#030203；stroke:#000000；stroke miter:10；}
.建筑物：悬停{
转换：translateY（-30px）；
}

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

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