如何在NextJS14中用SVG实现文本按钮并动态修改填充描边色

方案一：将SVG转为Data URI结合CSS变量 #

这种方案延续你用background-image的思路，通过把SVG转为带CSS变量的Data URI，实现颜色动态控制：

1. 修改SVG代码：把原SVG里的fill和stroke固定值替换成CSS变量，比如fill="var(--button-fill)"、stroke="var(--button-stroke)"。
2. 转为Data URI：将修改后的SVG代码转成URL编码的Data URI（可手动转义特殊字符，或用工具完成）。
3. CSS模块配置：在按钮的CSS模块中设置背景图，并绑定变量：

/* Button.module.css */
.button {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="var(--button-fill)" stroke="var(--button-stroke)" viewBox="0 0 200 50">...</svg>');
  background-size: cover;
  background-repeat: no-repeat;
  /* 补充按钮基础样式：内边距、字体等 */
  padding: 12px 24px;
  border: none;
  cursor: pointer;
}

4. React组件动态传值：通过props控制CSS变量的实际值：

// Button.jsx
import styles from './Button.module.css';

export default function Button({ fillColor, strokeColor, children, ...props }) {
  return (
    <button
      className={styles.button}
      style={{
        '--button-fill': fillColor || 'var(--color-primary)',
        '--button-stroke': strokeColor || 'var(--color-border)',
      }}
      {...props}
    >
      {children}
    </button>
  );
}

这里的var(--color-primary)是你全局定义的CSS变量，直接复用即可。

方案二：内联SVG作为背景层 #

如果觉得Data URI不够直观，可将SVG作为按钮的子元素，绝对定位在文本下方当背景：

// Button.jsx
import styles from './Button.module.css';

export default function Button({ fillColor, strokeColor, children, ...props }) {
  return (
    <button className={styles.button} {...props}>
      <svg
        className={styles.buttonBg}
        fill={fillColor || 'var(--color-primary)'}
        stroke={strokeColor || 'var(--color-border)'}
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 200 50"
      >
        {/* 粘贴你的SVG路径代码 */}
      </svg>
      <span className={styles.buttonText}>{children}</span>
    </button>
  );
}

对应的CSS模块配置：

/* Button.module.css */
.button {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  width: fit-content;
  cursor: pointer;
}

.buttonBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 避免SVG阻挡按钮点击 */
}

.buttonText {
  position: relative;
  z-index: 1;
  padding: 12px 24px; /* 调整内边距匹配SVG尺寸 */
}

两种方案都能实现动态修改颜色，方案一更贴近你原有的实现思路，方案二更便于调试SVG细节。

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