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

问题描述

html

css

.logo-img 路径 {填充:#000；}

上面的 svg 加载并且本身是 fill: #fff 但是当我使用上面的 css 尝试将其更改为黑色时它不会改变，这是我的第一次玩 SVG，我不知道为什么它不起作用.

解决方案

您可以将 SVG 设置为掩码.这样设置背景颜色将作为您的填充颜色.

HTML

CSS

.logo {背景颜色:红色；-webkit-mask: url(logo.svg) 无重复中心；掩码:url(logo.svg) 无重复中心；}

JSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb/
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask

请检查您的浏览器是否支持此功能:https://caniuse.com/#search=mask

html

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

css

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

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.

解决方案

You could set your SVG as a mask. That way setting a background-color would act as your fill color.

HTML

<div class="logo"></div>

CSS

.logo {
  background-color: red;
  -webkit-mask: url(logo.svg) no-repeat center;
  mask: url(logo.svg) no-repeat center;
}

JSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb/
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask

Please check whether your browser supports this feature: https://caniuse.com/#search=mask

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