html - 在 CSS 中更改 SVG 描边颜色

<分区>

出于某种原因，在 CSS 中设置 `color: #ffffff` 不适用于我的 SVG。

下面的代码看起来如何

我希望它看起来如何

有趣的是，如果我在 SVG 本身中将 currentColor 替换为#ffffff，它会起作用，但在我的 CSS 中设置它不会执行任何操作。我还尝试在 HTML 中内联设置它 (style="color:#ffffff")，并设置 stroke: #ffffff，但这也没有做任何事情。

我没有想法，所以如果有人知道如何做到这一点，以及为什么在 css 中设置它不起作用，请告诉我。

这是我的代码:

下载.svg:

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="24" 
    height="24" 
    viewBox="0 0 24 24" 
    fill="none" 
    stroke="currentColor" 
    stroke-width="2" 
    stroke-linecap="round" 
    stroke-linejoin="round" 
    class="feather feather-download"
  >
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

我的头像:

<button type='button' class='btn btn-primary' on:click={ExportXlsx}>
  Last ned
  <img class='test' alt='download' src='/images/download.svg' />
</button>

我的CSS:

.test{
  color: #ffffff !important;
}

最佳答案

方法#1

您需要为 stroke 属性指定颜色:

stroke="rgb(255, 255, 255)"

工作示例:

button {
  height: 48px;
  padding: 0 12px;
  font-size: 18px;
  line-height: 48px;
  font-weight: 900;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 63);
  border: none;
  border-radius: 9px;
  box-sizing: border-box;
}

button svg {
  margin-left: 4px;
  transform: translateY(4px);
}

<button type="button">
Eksporter

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="24" 
    height="24" 
    viewBox="0 0 24 24" 
    fill="none" 
    stroke="rgb(255, 255, 255)" 
    stroke-width="2" 
    stroke-linecap="round" 
    stroke-linejoin="round" 
    class="feather feather-download"
  >
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

</button>

方法#2

您可以使用 CSS 而不是 SVG 属性。

工作示例:

button {
  height: 48px;
  padding: 0 12px;
  font-size: 18px;
  line-height: 48px;
  font-weight: 900;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 63);
  border: none;
  border-radius: 9px;
  box-sizing: border-box;
}

button svg {
  width: 24px;
  height: 24px;
  margin-left: 4px;
  transform: translateY(4px);
  stroke-width: 2px; 
  stroke-linecap: round;
  stroke-linejoin: round;
}

button.red svg {
  stroke: rgb(255, 0, 0);
}

button.yellow svg {
  stroke: rgb(255, 255, 0);
}

button.green svg {
  stroke: rgb(0, 255, 63);
}

<button type="button" class="red">
Eksporter

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

</button>

<button type="button" class="yellow">
Eksporter

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

</button>

<button type="button" class="green">
Eksporter

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

</button>

关于html - 在 CSS 中更改 SVG 描边颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70800176/