在CSS中更改SVG描边颜色

Question

由于某种原因，在CSS中设置color: #ffffff无法应用于我的SVG。

使用以下代码的外观

我希望它看起来像这样

有趣的是，如果在SVG本身中使用#ffffff替换currentColor，它会生效，但在CSS中进行设置不会生效。我还尝试在HTML中内联设置（style="color:#ffffff"），以及设置stroke:#ffffff，但都没有生效。

我已经无计可施了，如果有人知道如何解决此问题，并知道为什么在CSS中进行设置不起作用，请告诉我。

以下是我的代码：

download.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;
}

- Snailedlt

---

https://css-tricks.com/using-svg/#aa-the-problem-with-both-img-and-background-image - CBroe

使用<use>元素可以解决问题：您还可以引用外部SVG资源（类似于img）。另请参见如何访问外部插入的SVG文件的样式属性？ - herrstrietzel

Answer 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>

方法二

可以使用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>

- Rounin

---

有没有不使用内联SVG的方法来实现这个？我在多个地方使用相同的SVG，如果可能的话，我不想使用内联。 - Snailedlt

@Hackiss 是的，你可以直接在你的SVG文件中更改 stroke。 - maiakd

@maiakd 是的，但如果我想在其他地方使用不同颜色，那么我就必须再制作一个SVG。有没有办法在HTML或CSS文件中设置颜色而不制作新的SVG呢？ - Snailedlt

您可以使用include（partial）将您的SVG放在单独的文件中，这样您就不必在想要显示它的每个地方都放置SVG代码，但是内联SVG是使用CSS更改颜色的最佳方法。 - Gert B.

回复：“有没有办法在不创建新的SVG的情况下从HTML或CSS文件中设置颜色？” 是的。您可以使用CSS替换SVG属性。请参见上面的方法#2。 - Rounin