如何实现SVG文本变形为胶囊形状？现有前端代码求助

核心思路 #

让文本适配tb1输入框的胶囊形状，核心是给文本容器添加胶囊样式，并通过过渡动画实现平滑变形，同时可同步输入框的尺寸参数保证完全匹配。

具体实现步骤 #

1. 定义胶囊样式（CSS） #

给文本容器添加胶囊形状的基础样式，同时配置过渡动画：

/* 替换为你的文本容器类名 */
.capsule-text {
  /* 胶囊圆角：用超大值实现自适应高度的胶囊，或直接使用输入框的圆角值 */
  border-radius: 9999px;
  /* 同步输入框的内边距、边框、背景色 */
  padding: 0.5rem 1rem;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  /* 平滑过渡动画 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

2. 触发变形动画（JavaScript） #

在你的美化动画序列最后一步，给文本元素添加上述样式类：

// 假设动画时序完成后调用此函数
function triggerCapsuleTransform() {
  const targetText = document.getElementById('your-text-id');
  targetText.classList.add('capsule-text');
}

3. 完全匹配输入框尺寸 #

如果需要文本容器和tb1输入框的尺寸完全一致，可通过JS同步输入框的计算样式：

function syncWithInputSize() {
  const inputBox = document.getElementById('tb1');
  const textElement = document.getElementById('your-text-id');
  const inputStyles = window.getComputedStyle(inputBox);
  
  // 同步关键样式
  textElement.style.width = inputStyles.width;
  textElement.style.height = inputStyles.height;
  textElement.style.padding = inputStyles.padding;
  textElement.style.borderRadius = inputStyles.borderRadius;
}

4. 处理长文本溢出 #

若输入的用户名过长，添加溢出省略逻辑避免容器变形：

.capsule-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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