英文:
How to change svg color
问题
我想要改变SVG的颜色。
HTML
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-css -->
img {
width: 50%;
height: 50%;
}
<!-- 语言: lang-html -->
<link rel="stylesheet" href="css/style.css">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Dollar_sign_in_circle_cleaned_%28PD_version%29.green.svg">
<!-- 结束代码片段 -->
我该如何在CSS文件中实现?
我尝试过:
- https://www.youtube.com/watch?v=emFMHH2Bfvo&ab_channel=Fireship
- https://www.youtube.com/watch?v=qA_-O35O_X4&ab_channel=Skillthrive
只有当我更改.svg文件时颜色才会改变。
英文:
I want to change svg color
HTML
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
img {
width:50%;
height: 50%;
}
<!-- language: lang-html -->
<link rel="stylesheet" href="css/style.css">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Dollar_sign_in_circle_cleaned_%28PD_version%29.green.svg">
<!-- end snippet -->
How I can do it in css file?
I tryed:
https://www.youtube.com/watch?v=emFMHH2Bfvo&ab_channel=Fireship
https://www.youtube.com/watch?v=qA_-O35O_X4&ab_channel=Skillthrive
Color changes only if I change .svg file
答案1
得分: 1
尝试这个:
img {
width: 50%;
height: 50%;
filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
<link rel="stylesheet" href="css/style.css">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Dollar_sign_in_circle_cleaned_%28PD_version%29.green.svg">
要使用另一种颜色,请使用此链接。
英文:
Try this:
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
img {
width:50%;
height: 50%;
filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
<!-- language: lang-html -->
<link rel="stylesheet" href="css/style.css">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Dollar_sign_in_circle_cleaned_%28PD_version%29.green.svg">
<!-- end snippet -->
For another color use this
答案2
得分: 0
这种方法将允许您控制元素的颜色。
<!-- css -->
.colorize {
stroke: #000000;
stroke-width: 0;
fill: #189948;
}
.colorize-inside {
stroke: #000000;
stroke-width: 0;
fill: #ffffff;
}
.colorize:hover {
stroke: #000000;
stroke-width: 1px;
fill: #FF0000;
}
<!-- svg -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="216px" height="216px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve">
<circle cx="108.049" cy="108.049" r="102.049" class="colorize"></circle>
<circle class="colorize-inside" cx="107.039" cy="107.04" r="83.862"></circle>
<g>
<path class="colorize" d="M99.413,169.801v-14.319c-10.099-0.452-19.896-3.316-25.624-6.481l4.521-17.635c6.331,3.467,15.224,6.632,25.021,6.632c8.742,0,14.62-3.467,14.62-9.345c0-5.729-4.823-9.346-16.127-13.113c-16.128-5.426-27.131-12.963-27.131-27.583c0-13.415,9.345-23.815,25.473-26.83V46.808h14.771v13.264 c9.948,0.302,16.73,2.562,22.006,4.974l-4.521,17.032c-3.768-1.809-10.852-5.275-21.705-5.275c-9.796,0-12.962,4.371-12.962,8.591c0,4.823,5.275,8.139,18.237,12.812c17.938,6.331,25.021,14.621,25.021,28.337c0,13.415-9.346,24.87-26.679,27.733v15.525H99.413z"></path>
</g>
</svg>
https://jsfiddle.net/jasonbruce/ymebruc5/2/
英文:
This method will allow you to control color of the element.
<!-- css -->
.colorize {
stroke: #000000;
stroke-width: 0;
fill: #189948;}
.colorize-inside {
stroke: #000000;
stroke-width: 0;
fill: #ffffff;}
.colorize:hover {
stroke: #000000;
stroke-width: 1px;
fill: #FF0000;}
<!-- svg -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="216px" height="216px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve">
<circle cx="108.049" cy="108.049" r="102.049" class="colorize"/>
<circle class="colorize-inside" cx="107.039" cy="107.04" r="83.862"/>
<g>
<path class="colorize" d="M99.413,169.801v-14.319c-10.099-0.452-19.896-3.316-25.624-6.481l4.521-17.635 c6.331,3.467,15.224,6.632,25.021,6.632c8.742,0,14.62-3.467,14.62-9.345c0-5.729-4.823-9.346-16.127-13.113 c-16.128-5.426-27.131-12.963-27.131-27.583c0-13.415,9.345-23.815,25.473-26.83V46.808h14.771v13.264
c9.948,0.302,16.73,2.562,22.006,4.974l-4.521,17.032c-3.768-1.809-10.852-5.275-21.705-5.275c-9.796,0-12.962,4.371-12.962,8.591 c0,4.823,5.275,8.139,18.237,12.812c17.938,6.331,25.021,14.621,25.021,28.337c0,13.415-9.346,24.87-26.679,27.733v15.525H99.413z"/>
</g>
</svg>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论