英文:
Control the style of svg
问题
以下是翻译好的部分：
.search-bar svg {
width: 25px;
height: 25px;
color: red;
}
.search-button svg {
width: 25px;
height: 25px;
color: red;
}
<div class="search-bar">
<form>
<a class="search-button" type="submit">
<svg class="svg-research" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"/>
<circle cx="116" cy="116" r="84" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<line x1="175.4" y1="175.4" x2="224" y2="224" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
</svg>
</a>
</form>
</div>
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.search-bar svg {
width: 25px;
height: 25px;
color: red;
}
.search-button svg {
width: 25px;
height: 25px;
color: red;
}
<!-- language: lang-html -->
<div class="search-bar">
<form>
<a class="search-button" type="submit">
<svg class="svg-research" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"/>
<circle cx="116" cy="116" r="84" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<line x1="175.4" y1="175.4" x2="224" y2="224" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
</svg>
</a>
</form>
</div>
<!-- end snippet -->
Can anyone tell me how to control the color of svg using CSS. I tried using different classes and ids to do this but none seem to have an effect on the color. I was able to change the size and position, but am failing to change the color. I wish to do this using a single ID or class instead of changing the color of the circle and line individually.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div class="search-bar">
<form>
<a class="search-button" type="submit">
<svg class="svg-research" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"/>
<circle cx="116" cy="116" r="84" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<line x1="175.4" y1="175.4" x2="224" y2="224" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
</svg>
</a>
</form>
</div>
<!-- end snippet -->
答案1
得分: 1
将线条（例如，line）和圆圈（例如，circle）的共享属性（例如，stroke）设置为currentColor的值，然后您可以通过svg的color属性（或它们继承的任何常见祖先）来控制它：
.search-button svg {
width: 25px;
height: 25px;
color: red;
}
.search-button svg line, .search-button svg circle {
stroke: currentColor;
}
这是在Font Awesome和其他库中底层执行的操作。如果您使用em单位为height和width赋值，您还可以通过继承的font-size属性来控制它。
英文:
Give the shared properties (e.g. stroke of line and stroke of circle) value of currentColor, and then you can control it via the color property of the svg (or any common ancestor they inherit from):
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
.search-button svg {
width: 25px;
height: 25px;
color: red;
}
.search-button svg line,.search-button svg circle{
stroke: currentColor;
}
<!-- language: lang-html -->
<div class="search-bar">
<form>
<a class="search-button" type="submit">
<svg class="svg-research" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<circle cx="116" cy="116" r="84" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<line x1="175.4" y1="175.4" x2="224" y2="224" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
</svg>
</a>
</form>
</div>
<!-- end snippet -->
This is what's done under the hood in Font Awesome and other
libraries. It can be done too for height and width, if you give them value in em units, you can control it later with font-size which is inherited too.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论