html - SVG .fill 不想工作

Question

有人可以向我解释为什么我不能更改此 svg 的填充:

<div class="container">
  <ul class="todo">
    <li>

    This is an item
    <div class ="buttons">
        <button class="remove">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59 59" style="fill;" xml:space="preserve"><g><path d="M29.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C28.5,50.553,28.948,51,29.5,51z"/><path d="M19.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C18.5,50.553,18.948,51,19.5,51z"/><path d="M39.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C38.5,50.553,38.948,51,39.5,51z"/><path d="M52.5,6H38.456c-0.11-1.25-0.495-3.358-1.813-4.711C35.809,0.434,34.751,0,33.499,0H23.5c-1.252,0-2.31,0.434-3.144,1.289C19.038,2.642,18.653,4.75,18.543,6H6.5c-0.552,0-1,0.447-1,1s0.448,1,1,1h2.041l1.915,46.021C10.493,55.743,11.565,59,15.364,59h28.272c3.799,0,4.871-3.257,4.907-4.958L50.459,8H52.5c0.552,0,1-0.447,1-1S53.052,6,52.5,6z M21.792,2.681C22.24,2.223,22.799,2,23.5,2h9.999c0.701,0,1.26,0.223,1.708,0.681c0.805,0.823,1.128,2.271,1.24,3.319H20.553C20.665,4.952,20.988,3.504,21.792,2.681z M46.544,53.979C46.538,54.288,46.4,57,43.636,57H15.364c-2.734,0-2.898-2.717-2.909-3.042L10.542,8h37.915L46.544,53.979z"/></svg>           </button>
        <button class="complete">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve"><g><path d="M26,0C11.664,0,0,11.663,0,26s11.664,26,26,26s26-11.663,26-26S40.336,0,26,0z M26,50C12.767,50,2,39.233,2,26S12.767,2,26,2s24,10.767,24,24S39.233,50,26,50z"/><path d="M38.252,15.336l-15.369,17.29l-9.259-7.407c-0.43-0.345-1.061-0.274-1.405,0.156c-0.345,0.432-0.275,1.061,0.156,1.406l10,8C22.559,34.928,22.78,35,23,35c0.276,0,0.551-0.114,0.748-0.336l16-18c0.367-0.412,0.33-1.045-0.083-1.411C39.251,14.885,38.62,14.922,38.252,15.336z"/></svg>
        </button>
    </div>
    </li>

  </ul>
</div>

通过 css 我尝试操作:

ul.todo li .buttons button svg {
    width:22px;
    height:22px;
    position:absolute;
    top:50%;
    left:50%;
    margin:0 0 0 -11px;
}

ul.todo li .buttons button.remove svg .fill {
    fill:#c0cecb;

}

ul.todo li .buttons button.remove:hover svg .fill {
    fill:#e85656;

}

ul.todo li .buttons button.complete svg .fill {
    fill:#25b99a;

}

我想问题是我没有将 css 正确指向 svg，非常感谢任何帮助。

Answer 1

svg .fill {}

... 将规则应用于任何 HTML具有 fill 的元素类并且是 <svg> 的后代标签。如果要选择<svg>具有 fill 的标签属性集，你可以使用

svg[fill] {}

请注意两者之间没有任何“”(空格字符)。 参见 CSS selectors 和 CSS combinators 了解详情。

例如，您的第一条规则应该是:

ul.todo li .buttons button.remove svg {
    fill:#c0cecb;
}

...但这资格太高(过于具体)。很有可能……

.todo .button > svg {
     fill:#c0cecb;
}

... 绰绰有余，没有影响您网站/应用程序中任何其他内容的风险。