如何使用 SVG 文件作为文本按钮的形状？

Question

我正在 NextJS14 (React) 中建立一个设计系统。我们使用 CSS 模块并将所有颜色存储在 CSS 变量（自定义属性）中。

我们的 Figma 设计中有这些漂亮的按钮。我想使用导出的 SVG 作为文本按钮的形状。

我通过将

background-image:

设置为 SVG 的 url 取得了一些进展。但是，我还没有找到一种方法来根据传递到自定义 Button 组件的 props 动态更改 SVG 的填充和描边颜色。

Answer 1

这里有一些选项。对于你的情况，我想可以使用前两个例子。最后一种是另一种方法，仅在某些情况下有效。

嵌入 SVG

将 SVG 嵌入 HTML 并使用 CSS 设置 SVG 元素的样式。

button.orange rect {
  fill: orange;
}

button.lime rect {
  fill: lime;
}

button {
  background-color: transparent;
  border: none;
  display: grid;
}

button svg {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

button span {
  grid-column: 1;
  grid-row: 1; 
  align-self: center;
  padding: 0 1em;
}

<button class="orange">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 20">
    <rect width="60" height="20" rx="5" fill="white" />  
  </svg>
  <span>Button</span>
</button>

<button class="lime">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 20">
    <rect width="60" height="20" rx="5" fill="white" />  
  </svg>
  <span>Button</span>
</button>

CSS 背景图像

只需重复创建具有不同背景图像的不同 CSS 选择器即可。

button.orange {
  fill: orange;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 20"><rect width="60" height="20" rx="5" fill="orange" /></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

button.lime {
  fill: orange;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 20"><rect width="60" height="20" rx="5" fill="lime" /></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

button {
  background-color: transparent;
  border: none;
  display: grid;
}

button svg {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

button span {
  grid-column: 1;
  grid-row: 1; 
  align-self: center;
  padding: .2em 1em;
}

<button class="orange">
  <span>Button</span>
</button>

<button class="lime">
  <span>Button</span>
</button>

仅带有渐变的 CSS 背景

将背景图像（SVG 文档）与 CSS 中定义的纯色背景颜色相结合。 SVG 图像只是从透明到白色的渐变。

button.gradient01 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJnMDEiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoOTApIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1vcGFjaXR5PSIwIiBzdG9wLWNvbG9yPSJ3aGl0ZSIgLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLW9wYWNpdHk9IjEiIHN0b3AtY29sb3I9IndoaXRlIiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNnMDEpIiAvPgo8L3N2Zz4=');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

button.orange {
  background-color: orange;
}

button.lime {
  background-color: lime;
}

button {
  background-color: transparent;
  border: none;
  display: grid;
  border-radius: 5px;
}

button svg {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

button span {
  grid-column: 1;
  grid-row: 1; 
  align-self: center;
  padding: .2em 1em;
}

<button class="orange gradient01">
  <span>Button</span>
</button>

<button class="lime gradient01">
  <span>Button</span>
</button>

<p>The SVG used as background:</p> 
<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="g01" gradientTransform="rotate(90)">
      <stop offset="0%" stop-opacity="0" stop-color="white" />
      <stop offset="100%" stop-opacity="1" stop-color="white" />
    </linearGradient>
  </defs>
  <rect width="100%" height="100%" fill="url(#g01)" />
</svg>

Answer 2

我很高兴分享我终于成功了：

• 使用 SVG 作为按钮的形状
• 使用道具更改缩放、宽度、颜色和可选图标
• 将颜色链接到我的自定义 CSS 变量以实现可维护性

如果没有你的建议@chrwahl，我不可能走到这一步。谢谢一百万！