Question

有没有办法让绿色盒子像红色盒子一样，但方向相反？宽度应从左向右缩小，而不是从右向左缩小。我知道如果我用div替换盒子并给它们背景颜色，但它尝试了它并且它看起来不那么好。此外，悬停并没有做它应该做的事情，似乎无法解决这个问题。

.block rect{
  transition: 200ms;
  transition-timing-function: ease-in-out;
  -webkit-transition: 200ms;
  -webkit-transition-timing-function: ease-in-out;

}

.block:hover rect{
    width: 0px;
}


<svg class="emblem" version="1.1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px"
   height="500px" viewBox="0 0 553 553" enable-background="new 0 0 553 553" 
xml:space="preserve">
<g id="Layer_2">
  <g class="block">
    <rect x="277" y="126" fill="#960B2C" width="156" height="88"/>
    <rect x="120" y="126" fill="#004D44" width="157" height="88"/>
  </g>
  <g class="block">
    <rect x="277" y="232" fill="#960B2C" width="156" height="88"/>
    <rect x="120" y="232" fill="#004D44" width="157" height="88"/>
  </g>
  <g class="block">
    <rect x="277" y="339" fill="#960B2C" width="156" height="88"/>
    <rect x="120" y="339" fill="#004D44" width="157" height="88"/>
  </g>
</g>
</svg>

svg宽度css动画从左到右而不是从右到左

0 个答案: