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

Question

我正在关注此代码笔，但作者的代码不适用于我自己的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>

Answer 1

它不起作用，因为HTML中的private bool isEditable; public bool IsEditable { get { return isEditable; } set { if(value != isEditable) { isEditable = value; RaisePropertyChanged("IsEditable"); } } } 属性优先于CSS样式表。因此颜色永远不会改变。

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

style

一个工作示例：

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