使用CSS

Question

在SVG中我有一个<g 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>

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

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

由于position和top在SVG中不起作用，我显然必须采取另一种方式

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

这是fiddle

Answer 1

您可以使用CSS转换来移动它。当你为g和rect定义的同一个类时要小心，你可能想重新考虑一下。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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