英文:
Changing SVG color using CSS
问题
我尝试在我的HTML中使用CSS更改SVG图片的颜色，并在SVG文档中尝试使用"fill=currentColor"，但它没有给我预期的结果。
我尝试了各种教程和方法，但对我来说没有用。
以下是SVG文档代码。
<svg width="22" height="19" viewBox="0 0 22 19" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.69795 0.799227C10.0605 0.488302 10.5223 0.317383 11 0.317383C11.4776 0.317383 11.9394 0.488302 12.302 0.799227L18.638 6.22923L21.125 8.21923C21.2275 8.3013 21.3129 8.40278 21.3763 8.51785C21.4396 8.63293 21.4797 8.75936 21.4941 8.88992C21.5086 9.02048 21.4973 9.15261 21.4607 9.27878C21.4241 9.40494 21.363 9.52267 21.281 9.62523C21.1989 9.72779 21.0974 9.81318 20.9823 9.87653C20.8672 9.93987 20.7408 9.97993 20.6103 9.99442C20.4797 10.0089 20.3476 9.99753 20.2214 9.96095C20.0952 9.92438 19.9775 9.8633 19.875 9.78123L19 9.08123V17.0002C19 17.5307 18.7892 18.0394 18.4142 18.4144C18.0391 18.7895 17.5304 19.0002 17 19.0002H13V14.0002C13 13.4698 12.7892 12.9611 12.4142 12.586C12.0391 12.2109 11.5304 12.0002 11 12.0002C10.4695 12.0002 9.96081 12.2109 9.58574 12.586C9.21067 12.9611 8.99995 13.4698 8.99995 14.0002V19.0002H4.99995C4.46952 19.0002 3.96081 18.7895 3.58574 18.4144C3.21067 18.0394 2.99995 17.5307 2.99995 17.0002V9.08023L2.12495 9.78023C2.02309 9.86721 1.90478 9.93284 1.77707 9.97322C1.64935 10.0136 1.51482 10.0279 1.38146 10.0153C1.24811 10.0027 1.11865 9.96344 1.00076 9.89983C0.882872 9.83623 0.778965 9.74959 0.695205 9.64506C0.611446 9.54053 0.549541 9.42023 0.513165 9.29132C0.476789 9.1624 0.466684 9.02749 0.48345 8.89459C0.500215 8.76169 0.543509 8.63352 0.610762 8.51768C0.678016 8.40183 0.767857 8.30068 0.874953 8.22023L3.36195 6.23023L9.69795 0.799227Z" fill="currentColor"/>
</svg>
在HTML中，我像这样使用它：
<div class="container">
<div class="sidebar-link">
<div class="in">
<a style="color: yellow;" href="#"><img src="./../assets/Home.svg"></a>
</div>
<div class="in">
<a class="a" href="#">Dashboard</a>
</div>
</div>
</div>
资产文件夹中有Home.svg，我只是在这里使用它，可能需要CSS解决方案以使其正常工作吗？
编辑：我在锚标签中使用了颜色并将其设为黄色，所以这段代码是否正确，还是还有其他方法可以获得预期的结果。因此，在文档末尾我放了"fill=currentColor"，但颜色不像我想要的那样改变。但如果我指定黄色而不是"currentColor"，它就可以正常工作。有没有办法使用CSS更改颜色？
英文:
I tried to change the svg picture color in my html using css and i tried using fill=currentColor in the svg doc as well but it didnt give me the expected result
I tried various tutorials and methods but it was not working for me
The below code is the svg document code.
<svg width="22" height="19" viewBox="0 0 22 19" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.69795 0.799227C10.0605 0.488302 10.5223 0.317383 11 0.317383C11.4776 0.317383 11.9394 0.488302 12.302 0.799227L18.638 6.22923L21.125 8.21923C21.2275 8.3013 21.3129 8.40278 21.3763 8.51785C21.4396 8.63293 21.4797 8.75936 21.4941 8.88992C21.5086 9.02048 21.4973 9.15261 21.4607 9.27878C21.4241 9.40494 21.363 9.52267 21.281 9.62523C21.1989 9.72779 21.0974 9.81318 20.9823 9.87653C20.8672 9.93987 20.7408 9.97993 20.6103 9.99442C20.4797 10.0089 20.3476 9.99753 20.2214 9.96095C20.0952 9.92438 19.9775 9.8633 19.875 9.78123L19 9.08123V17.0002C19 17.5307 18.7892 18.0394 18.4142 18.4144C18.0391 18.7895 17.5304 19.0002 17 19.0002H13V14.0002C13 13.4698 12.7892 12.9611 12.4142 12.586C12.0391 12.2109 11.5304 12.0002 11 12.0002C10.4695 12.0002 9.96081 12.2109 9.58574 12.586C9.21067 12.9611 8.99995 13.4698 8.99995 14.0002V19.0002H4.99995C4.46952 19.0002 3.96081 18.7895 3.58574 18.4144C3.21067 18.0394 2.99995 17.5307 2.99995 17.0002V9.08023L2.12495 9.78023C2.02309 9.86721 1.90478 9.93284 1.77707 9.97322C1.64935 10.0136 1.51482 10.0279 1.38146 10.0153C1.24811 10.0027 1.11865 9.96344 1.00076 9.89983C0.882872 9.83623 0.778965 9.74959 0.695205 9.64506C0.611446 9.54053 0.549541 9.42023 0.513165 9.29132C0.476789 9.1624 0.466684 9.02749 0.48345 8.89459C0.500215 8.76169 0.543509 8.63352 0.610762 8.51768C0.678016 8.40183 0.767857 8.30068 0.874953 8.22023L3.36195 6.23023L9.69795 0.799227Z" fill="currentColor"/>
</svg>
And in the html i used it like this
<div class="container">
<div class="sidebar-link">
<div class="in">
<a style="color: yellow;" href="#"><img src="./../assets/Home.svg"></a>
</div>
<div class="in">
<a class="a" href="#">Dashboard</a>
</div>
</div>
</div>
The assets folder has the Home.svg and i just used it here and possible css solutions so that i can get this working?
EDIT : I used color in anchor tag and gave it yellow so it this code correct or is there something else to do get my expected result. So in the document i put fill=currentColor at the end but the color doesnt change as i want. But if i specify yellow instead of currentColor it works fine. Any way i can change the color using css?
答案1
得分: 3
从<path>中删除fill="#BCBCBC"，现在CSS有效！
英文:
Remove fill="#BCBCBC" from <path>, now css works!
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
svg {
fill: rgb(77, 10, 235);
}
<!-- language: lang-html -->
<svg width="22" height="19" viewBox="0 0 22 19" fill="red" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.69795 0.799227C10.0605 0.488302 10.5223 0.317383 11 0.317383C11.4776 0.317383 11.9394 0.488302 12.302 0.799227L18.638 6.22923L21.125 8.21923C21.2275 8.3013 21.3129 8.40278 21.3763 8.51785C21.4396 8.63293 21.4797 8.75936 21.4941 8.88992C21.5086 9.02048 21.4973 9.15261 21.4607 9.27878C21.4241 9.40494 21.363 9.52267 21.281 9.62523C21.1989 9.72779 21.0974 9.81318 20.9823 9.87653C20.8672 9.93987 20.7408 9.97993 20.6103 9.99442C20.4797 10.0089 20.3476 9.99753 20.2214 9.96095C20.0952 9.92438 19.9775 9.8633 19.875 9.78123L19 9.08123V17.0002C19 17.5307 18.7892 18.0394 18.4142 18.4144C18.0391 18.7895 17.5304 19.0002 17 19.0002H13V14.0002C13 13.4698 12.7892 12.9611 12.4142 12.586C12.0391 12.2109 11.5304 12.0002 11 12.0002C10.4695 12.0002 9.96081 12.2109 9.58574 12.586C9.21067 12.9611 8.99995 13.4698 8.99995 14.0002V19.0002H4.99995C4.46952 19.0002 3.96081 18.7895 3.58574 18.4144C3.21067 18.0394 2.99995 17.5307 2.99995 17.0002V9.08023L2.12495 9.78023C2.02309 9.86721 1.90478 9.93284 1.77707 9.97322C1.64935 10.0136 1.51482 10.0279 1.38146 10.0153C1.24811 10.0027 1.11865 9.96344 1.00076 9.89983C0.882872 9.83623 0.778965 9.74959 0.695205 9.64506C0.611446 9.54053 0.549541 9.42023 0.513165 9.29132C0.476789 9.1624 0.466684 9.02749 0.48345 8.89459C0.500215 8.76169 0.543509 8.63352 0.610762 8.51768C0.678016 8.40183 0.767857 8.30068 0.874953 8.22023L3.36195 6.23023L9.69795 0.799227Z" />
</svg>
<!-- end snippet -->
答案2
得分: 2
你的路径末尾有一个 fill="#BCBCBC"，它正在覆盖 svg 上的 fill="currentColor"。
英文:
You have a fill="#BCBCBC" on your path (at the very end) which is overwriting the fill="currentColor" on the svg.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论