我的 SVG 路径代码有什么问题？答案

【问题标题】：What is wrong with my SVG Path Code?我的 SVG 路径代码有什么问题？
【发布时间】：2016-06-03 23:15:15
【问题描述】：

我正在关注此代码笔，但作者的代码不适用于我自己的 Illustrator 自定义 SVG。原作者将填充作为内联 CSS 样式放在 SVG 路径代码上。如果我不将 SVG 路径代码设为白色，则白色悬停填充将不起作用。

默认情况下 - 图片是不可见的，但应该是颜色 #788F9B。

悬停时有效：

a svg:hover #bino { 
  fill: #fff;
}

<a href="#">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 209.84 136.85">
    <path id="bino" d="M58.07,139.42a23.28,23.28,0,0,1-23.13-18.92v2.63a22.71,22.71,0,0,0,23.13,21.55A22.34,22.34,0,0,0,81.2,123.15v-2.66A22.86,22.86,0,0,1,58.07,139.42Z" transform="translate(-10.14 -29.37)" style="fill:#29aae1" />
    <path d="M172.65,139.42a23.28,23.28,0,0,1-23.13-18.92v2.63a22.71,22.71,0,0,0,23.13,21.55,22.34,22.34,0,0,0,23.13-21.52v-2.66A23.28,23.28,0,0,1,172.65,139.42Z" transform="translate(-10.14 -29.37)" style="fill:#29aae1" />
    <path d="M204.72,82.65h0l-43.63-47.3a29.17,29.17,0,0,0-24.18-4.2,21,21,0,0,0-16.29,21v2.63a15.35,15.35,0,0,0-4.73-1.05,14,14,0,0,0-6.31,1.58l0.53-4.2a21,21,0,0,0-16.29-21,29.75,29.75,0,0,0-23.65,4.73L25.48,83.18h0a47.88,47.88,0,1,0,80.42,35.22v-5.26a11.25,11.25,0,0,0,8.94,4.2,11.93,11.93,0,0,0,9.46-4.73v5.78a47.83,47.83,0,0,0,95.66,0A46.83,46.83,0,0,0,204.72,82.65ZM58.07,151.51a33.11,33.11,0,1,1,33.11-33.11h0a33,33,0,0,1-32.8,33.11H58.07Zm114.58,0a33.11,33.11,0,1,1,33.11-33.11h0A33,33,0,0,1,173,151.51h-0.32Z" transform="translate(-10.14 -29.37)" style="fill:#fff" />
  </svg>
</a>

【问题讨论】：

标签： css svg

【解决方案1】：

它不起作用，因为 HTML 中的 style 属性优先于 CSS 样式表。因此颜色永远不会改变。

您可以通过在样式表中定义初始颜色来解决此问题：

#bino { 
  fill: #29aae1;
}
a:hover #bino { 
  fill: #fff;
}

一个工作示例：

a {
  display: block;
  width: 166px;
  padding: 30px;
}
a:hover {
  background-color: #166584;
}
.bino {
  fill: #29aae1;
}
#binocular {
  fill: #788F9B;
}
a:hover #binocular {
  fill: #fff;
}

<a href="#">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 209.84 136.85">
    <path class="bino" d="M58.07,139.42a23.28,23.28,0,0,1-23.13-18.92v2.63a22.71,22.71,0,0,0,23.13,21.55A22.34,22.34,0,0,0,81.2,123.15v-2.66A22.86,22.86,0,0,1,58.07,139.42Z" transform="translate(-10.14 -29.37)" />
    <path class="bino" d="M172.65,139.42a23.28,23.28,0,0,1-23.13-18.92v2.63a22.71,22.71,0,0,0,23.13,21.55,22.34,22.34,0,0,0,23.13-21.52v-2.66A23.28,23.28,0,0,1,172.65,139.42Z" transform="translate(-10.14 -29.37)" />
    <path id="binocular" d="M204.72,82.65h0l-43.63-47.3a29.17,29.17,0,0,0-24.18-4.2,21,21,0,0,0-16.29,21v2.63a15.35,15.35,0,0,0-4.73-1.05,14,14,0,0,0-6.31,1.58l0.53-4.2a21,21,0,0,0-16.29-21,29.75,29.75,0,0,0-23.65,4.73L25.48,83.18h0a47.88,47.88,0,1,0,80.42,35.22v-5.26a11.25,11.25,0,0,0,8.94,4.2,11.93,11.93,0,0,0,9.46-4.73v5.78a47.83,47.83,0,0,0,95.66,0A46.83,46.83,0,0,0,204.72,82.65ZM58.07,151.51a33.11,33.11,0,1,1,33.11-33.11h0a33,33,0,0,1-32.8,33.11H58.07Zm114.58,0a33.11,33.11,0,1,1,33.11-33.11h0A33,33,0,0,1,173,151.51h-0.32Z" transform="translate(-10.14 -29.37)" />
  </svg>
</a>

【讨论】：

悬停前的默认图标如下所示：drive.google.com/file/d/0B04GcFLQkkBlNEVNTmphSzhlZlk/… 通过查看此代码，我能够将其修复为我需要的样子。谢谢。
@PandaNinja 所以，你是要我让它变得相同吗？ :P
@PandaNinja 完成了
不，我不小心发布了。然后你在我完成编辑我的评论之前回复了我。谢谢你。这是关闭的。
@PandaNinja 我想没有填充，因为您不需要 style 属性。但是，我没有使用 Illustrator 的经验...