如何调整导航栏内SVG的位置，使其悬停时移动到右侧不遮挡文字？

当前代码仅实现了SVG的旋转效果，没有配置对应的位移逻辑，同时父容器缺少弹性布局规则，导致旋转后的SVG位置偏移遮挡文字。

需修改的核心逻辑如下：

• 给logo内部的导航链接设置弹性布局，方便控制子元素位置
• 移除SVG上无效的flex布局属性
• 悬停时给SVG添加自动左外边距，将其推到容器最右侧，配合旋转实现预期效果

修改后的完整CSS代码：

.logo {
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 1rem;
  text-align: center;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  font-size: 1.5rem;
  letter-spacing: 0.3ch;
  width: 100%;
}
/* 新增导航链接的弹性布局规则 */
.logo .nav-link {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}

.logo svg {
  /* 移除无效的flex相关属性，替换为正确的块级属性 */
  display: block;
  transform: rotate(0deg);
  transition: var(--transition-speed);
}

.logo-text {
  display: inline;
  position: absolute;
  left: 1rem;
  transition: var(--transition-speed);
}

.navbar .logo-text {
  display: none;
}

.navbar:hover .logo svg {
  transform: rotate(-180deg);
  /* 新增自动左外边距，将SVG推到容器最右侧 */
  margin-left: auto;
}

如果悬停后间距不符合预期，可调整.nav-link的padding值，或者给SVG添加右外边距微调位置即可。

内容的提问来源于stack exchange，提问作者pbhak