改变 SVG 颜色

huangapple go评论58阅读模式
英文:

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文件中实现?

我尝试过:

只有当我更改.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 -->

&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt;

&lt;img src=&quot;https://upload.wikimedia.org/wikipedia/commons/b/b9/Dollar_sign_in_circle_cleaned_%28PD_version%29.green.svg&quot;&gt;

<!-- end snippet -->

How I can do it in css file?

I tryed:
https://www.youtube.com/watch?v=emFMHH2Bfvo&amp;ab_channel=Fireship
https://www.youtube.com/watch?v=qA_-O35O_X4&amp;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 -->

&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt;

&lt;img src=&quot;https://upload.wikimedia.org/wikipedia/commons/b/b9/Dollar_sign_in_circle_cleaned_%28PD_version%29.green.svg&quot;&gt;

<!-- 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.

&lt;!-- css --&gt;
.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;}

&lt;!-- svg --&gt;
&lt;svg version=&quot;1.1&quot; id=&quot;Layer_1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; x=&quot;0px&quot; y=&quot;0px&quot; width=&quot;216px&quot; height=&quot;216px&quot; viewBox=&quot;0 0 216 216&quot; enable-background=&quot;new 0 0 216 216&quot; xml:space=&quot;preserve&quot;&gt;

&lt;circle cx=&quot;108.049&quot; cy=&quot;108.049&quot; r=&quot;102.049&quot; class=&quot;colorize&quot;/&gt;

&lt;circle class=&quot;colorize-inside&quot; cx=&quot;107.039&quot; cy=&quot;107.04&quot; r=&quot;83.862&quot;/&gt;

&lt;g&gt;

&lt;path class=&quot;colorize&quot; d=&quot;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&quot;/&gt;
&lt;/g&gt;

&lt;/svg&gt;

https://jsfiddle.net/jasonbruce/ymebruc5/2/

huangapple
  • 本文由 发表于 2023年2月26日 21:49:30
  • 转载请务必保留本文链接:https://go.coder-hub.com/75572435.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定