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

＆＃13;

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

＆＃13;

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

＆＃13;

Per @Ricky

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

此外，除fill之外还有other SVG specific CSS properties available。

Answer 2

您只需使用fill css属性，而不是颜色。

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

jsfiddle

无法设置SVG样式？

2 个答案: