无法设置 SVG 样式？

Question

请帮忙，我对编码比较陌生，想学习制作网站。我正在尝试插入一个菜单按钮，就像您从 SVG 中看到的按钮一样，但无法弄清楚如何设置它的样式。这是我第一次使用 SVG。我关注了一个关于如何做到这一点的 youtube 视频，但仍然没有运气:(提前感谢任何回复的人。

body {
  background-color: #edf0f1;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background: -webkit-linear-gradient(top, rgba(252, 25, 29, 1) 1%, rgba(201, 0, 3, 1) 50%, rgba(132, 3, 12, 1) 100%);
  border-bottom: solid 1.5px #000;
}
header h3 {
  float: left;
  font-size: 25px;
  padding-left: 20px;
  margin-top: 10.5px;
  color: #fff;
}
header button {
  position: fixed;
  top: 10px;
  left: 95%;
  background: none;
  border: none;
  cursor: pointer;
}
header button svg .fill {
  color: #fff;
}
.light {
  font-weight: lighter;
  opacity: 0.5;
  color: #fff;
}

<header>
  <h3>Practise <span class="light">Website</span></h3>
  <button>
    <svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <path class="fill" d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"
      />
    </svg>
  </button>
</header>

Answer 1

您需要

使用 fill 属性而不是 color 。

header button svg .fill {
    fill: #fff;
}

body {
  background-color: #edf0f1;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background: -webkit-linear-gradient(top, rgba(252, 25, 29, 1) 1%, rgba(201, 0, 3, 1) 50%, rgba(132, 3, 12, 1) 100%);
  border-bottom: solid 1.5px #000;
}
header h3 {
  float: left;
  font-size: 25px;
  padding-left: 20px;
  margin-top: 10.5px;
  color: #fff;
}
header button {
  position: fixed;
  top: 10px;
  left: 95%;
  background: none;
  border: none;
  cursor: pointer;
}
header button svg .fill {
  fill: #fff;
}
.light {
  font-weight: lighter;
  opacity: 0.5;
  color: #fff;
}

<header>
  <h3>Practise <span class="light">Website</span></h3>
  <button>
    <svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <path class="fill" d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"
      />
    </svg>
  </button>
</header>

每@Ricky

SVG 元素在 Web 上使用之前应进行清理。在 HTML 中添加内联 SVG 时，不需要 enable-background 和某些 xml 属性等属性。

此外，除了 fill 之外，还有其他特定于 SVG 的 CSS 属性可供您使用。

Answer 2

你只需要使用fill css属性，而不是color。

header button svg .fill {
  fill: #fff;
}

斯菲德尔