img src SVG使用CSS更改样式 [英] img src SVG changing the styles with CSS

问题描述

html

<img src="logo.svg" alt="Logo" class="logo-img">

css

.logo-img path {
  fill: #000;
}

上面的svg加载并且本来是fill: #fff，但是当我使用上面的css尝试将其更改为黑色时，它并没有改变，这是我第一次使用SVG，我不确定为什么不这样做工作.

The above svg loads and is natively fill: #fff but when I use the above css to try change it to black it doesn't change, this is my first time playing with SVG and I am not sure why it's not working.

推荐答案

如果您的目标只是更改徽标的颜色，而不必使用CSS，则不要使用javascript或jquery作为标记由先前的一些答案提出.

If your goal is just to change the color of the logo, and you don't necessarily NEED to use CSS, then don't use javascript or jquery as was suggested by some previous answers.

要精确回答原始问题，只需:

To precisely answer the original question, just:

1. 在文本编辑器中打开您的logo.svg.

查找fill: #fff并将其替换为fill: #000

例如，您的logo.svg在文本编辑器中打开时可能看起来像这样:

For example, your logo.svg might look like this when opened in a text editor:

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>

...只需更改填充并保存.

... just change the fill and save.

这篇关于img src SVG使用CSS更改样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！