我正在創建菜單圖標，使用hover，我想讓我在SVG中添加的rects改變位置，但是當我設置y: 45時它不起作用；在SVG的CSS中。

以下是我的代碼:

<button onClick={handleCloseMenu} className='dp-close-aside-menu' aria-controls='primary-navigation' aria-expanded='false'>
        <svg className='svg-menu-arrow' viewBox='0 0 100 100' width='250'>
          <rect className='line top' width={80} height={10}
          x={10} y={15} rx={5}
          ></rect>
          <rect className='line middle' width={80} height={10}
          x={10} y={45} rx={5}
          ></rect>
          <rect className='line bottom' width={80} height={10}
          x={10} y={75} rx={5}
          ></rect>
        </svg>
      </button>

和css:

.dp-close-aside-menu {
    width: 100%;
    display: flex; align-items: center; justify-content: end;
    padding: 10px;
    background-color: transparent;
    
}
.svg-menu-arrow {
    width: 20px;
    fill: var(--blancod6);
    cursor: pointer;
}
.svg-menu-arrow .line {
    transition: 1s;
    transform-origin: center;
}
.svg-menu-arrow:hover :is(.top, .bottom) {
    y: 45;
}

我這么做是因為我急需，但這不是我想要的。

.svg-menu-arrow.hover .middle {
    width: 10%;
    transform: translateX(2px);
}
.svg-menu-arrow.hover .top {
    transform: translateY(41.5px);
    rotate: -45deg;
    width: 50%;
}
.svg-menu-arrow.hover .bottom {
    transform: translateY(-41.5px);
    rotate: 45deg;
    width: 50%;
}

我知道如何用transform: translate()來做，但這不是我要找的。當我盤旋時，我想。頂部和。底部轉到位置y: 45。