在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>
如果the是a <div class="building">
,那么我将使用的CSS将是:
.building {
position: relative;
top: -20px;
}
由于position
并且top
在SVG中不起作用,因此我显然将不得不采用另一种方式
我如何向上移动20<g class="building">
像素?
这是一个小提琴
您可以使用CSS转换来移动它。请注意,因为您已经为g和rect定义了相同的类,所以您可能需要重新考虑一下。
.building{fill:#72B62B;stroke:#000000;stroke-miterlimit:10;}
.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"
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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句