开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >为svg背景图标添加颜色

问为svg背景图标添加颜色
EN

Stack Overflow用户

提问于 2021-09-13 07:58:35

回答 2查看 34关注 0票数 0

嗨，有没有办法像这样改变背景的svg图像的颜色？

  .icon {
    background: url("~images/icon.svg") center no-repeat;
  }

<i class="icon"></i>

例如，我需要它的图标填充蓝色，但这是不可能的，像这样的背景，有没有办法？

云联络中心6.1折起

灵活稳定的一体化云联络中心，助力快速搭建集电话、在线交流、音视频通话为一体的客户联络平台

EN

回答 2

Stack Overflow用户

发布于 2021-09-13 08:04:03

如果将SVG作为元素而不是背景图像CSS属性加载到HTML中，则可以更改该元素的fill属性

#mySVG
{
  fill: red !important;
}

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000" viewBox="0 0 16 16" id="mySVG">
  <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>

票数 1

EN

Stack Overflow用户

发布于 2021-09-13 09:02:35

如果SVG有一个透明的背景，您可以根据需要将background-image和background-color设置为SVG和SVG。它们会堆叠在一起。

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69165799

复制

相关文章

idea设置背景颜色为黑色(eclipse背景颜色设置黑色)

java https 网络安全

黑夜给了我黑色的眼睛我却用它来寻找光明。既然是黑色的眼睛那就设置一波黑色背景吧。在黑色额背景中寻找光明。

全栈程序员站长

2022/07/28

3.7K0

idea设置背景颜色为黑色(eclipse背景颜色设置黑色)

pycharm背景设置为黑色_pycharm设置护眼背景颜色

java https ide 网络安全

pycharm更改整体背景颜色（黑-白）打开pycharm： 1、左上角File —- Settings

全栈程序员站长

2022/09/25

1.7K0

pycharm背景设置为黑色_pycharm设置护眼背景颜色

PDF怎么加背景颜色？如何给PDF文件添加背景

PDF怎么加背景颜色？经常办公的朋友肯定会接触到很多的PDF文件吧，小编每天上班都快被PDF文件淹没了，每天查看那么多的文件也会有视觉疲劳的，想要给PDF文件添加一个有朝气一点的背景，你们知道怎么做嘛？小编这里有一个比较实用的方法，分享给大家，看看你会不会用得到！

用户5843321

2019/10/16

3.6K0

PDF怎么加背景颜色？如何给PDF文件添加背景

GitHub图标SVG版本

svg https css 网络安全网站

有没有发现，网页上的图片越来越多地使用svg矢量图来替代光栅图png，直接将svg嵌入到html中非常方便，事实上，光栅图比如相机照片中绝大部分像素都被人眼忽略掉了，造成大量冗余，矢量图才理应是最合理的图片格式。如今，各大网站的图标基本都是svg，比如GitHub：

Jean

2022/11/25

1K0

pycharm如何修改背景颜色_如何设置幻灯片背景颜色为自定义

https java 网络安全

Pycharm可以通过设置主题来设定背景颜色，但主题的背景颜色也仅仅局限特定的几种，通过如下的方式可以自定义背景颜色。

全栈程序员站长

2022/09/25

1.6K0

pycharm如何修改背景颜色_如何设置幻灯片背景颜色为自定义

设置pycharm背景颜色_python设置背景颜色

python java https 网络安全

1、选择不同的主题、选择背景图片　　　　　　　　　　　　Appearnce & Behavior　　–>　　Appearance

全栈程序员站长

2022/09/27

3.8K0

为UINavigationBar添加自定义背景

uinavigationbar

@implementation UINavigationBar (UINavigationBarCategory) - (void)drawRect:(CGRect)rect { //颜色填充 // UIColor *color = [UIColor redColor]; // CGContextRef context = UIGraphicsGetCurrentContext(); // CGContextSetFillColor(context, CGColorGetComponents( [colo

用户1172164

2018/01/16

7750

为UINavigationBar添加自定义背景

ubuntu为脚本添加桌面图标

微信 ubuntu linux

但有个问题就是，ubuntu 桌面默认是没有应用图标的，我们大多需要将应用的脚本添加到 PATH 环境中，然后用命令启动。

Frank909

2020/05/09

2K0

Vue 项目引入 SVG 图标

svg vue.js 渲染 webpack javascript

SVG 是一种可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG 由 W3C 制定，是一个开放标准。

数媒派

2022/12/01

2.1K0

用webfont为你的网站添加图标

https css 网络安全 php 网站

实际上e942是这个字符的16进制unicode编码，在unicode编码中，E000-F8FF是用户自定义区，形状可以任意制定。如果我们向网站引入自定义后的字体，就可以用上面的方式显示图标了。

gojam

2019/05/14

9250

为Django网站添加favicon.ico图标

c++网站 django python php

默认情况下，浏览器访问一个网站的时候，同时还会向服务器请求"/favicon.ico"这个URL，目的是获取网站的图标。

菲宇

2019/06/13

1.5K0

为Django网站添加favicon.ico图标

网站 django c++python 区块链

默认情况下，浏览器访问一个网站的时候，同时还会向服务器请求"/favicon.ico"这个URL，目的是获取网站的图标。

小贝壳

2020/03/05

1.3K0

【CSS】：颜色、背景

css https 网络安全网站

CSS 数据类型 <color> 表示一种标准RGB色彩空间（sRGB color space）的颜色。一种颜色可以用以下任意的方式来描述：

WEBJ2EE

2020/03/02

2.8K0

SVG绘制渐变颜色文字

H5提供了很多有意思的新特性，工作中用的比较少，但是这仍然不能阻碍我们对它的兴趣，先给大家上个图，如果要用CSS来写这个效果，如何才能实现呢？

越陌度阡

2020/11/26

2.2K0

ggthemr|为ggplot图形添加主题和颜色

ggplot2 image png 图表效率

ggthemr包提供了一种快速简便的方法来完全更改ggplot2图形的外观，并根据自己的调色板快速创建主题。

生信编程日常

2020/06/16

1.1K0

pycharm的背景颜色设置_css中设置背景颜色

https java 网络安全

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/174387.html原文链接：https://javaforall.cn

全栈程序员站长

2022/09/27

7.1K0

pycharm的背景颜色设置_css中设置背景颜色

Android--利用Palette实现根据图标自动设置背景颜色的组件（银行卡背景）

先放效果图：银行卡背景.jpg 首先看下布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http:/

aruba

2020/07/02

1.4K0

pycharm设置背景颜色_idea自定义背景颜色

java https 网络安全

　　pycharm原始的背景是白底黑字或者黑底白字，我都不是很喜欢。我配置的是豆沙绿背景，字还是黑字，效果还不错，这种是比较护眼的。如图：

全栈程序员站长

2022/09/27

2K0

pycharm设置背景颜色_idea自定义背景颜色

为matlab GUI添加背景图片

gui matlab https java 网络安全

为GUI添加一个背景图片，不仅可以让我们的界面变得漂亮大气上档次，而且软件对与用户的交互更加友好。用C或者C++写过软件界面的人都知道，这件事情可以轻而易举的办到，那么问题来了，怎么为matlab的GUI添加一个背景图片呢？其实这个操作也很简单，但是如果是第一次做这个，可能需要折腾好久。在这里我希望跟大家分享一下这个小技巧，避免大家遇到同样的问题再走弯路。欢迎交流！首先简单说一下matlab制作GUI的方法，其实这里有2种方法，这里说一种比较简单的方法，即利用matlab的GUI工具进行，特别对于大型软件开发来说，这种方法是很方便的。在matlab命令行里面输入guide，打开向导，界面如下图所示。

全栈程序员站长

2022/07/01

4.5K0

为matlab GUI添加背景图片

点击加载更多

相似问题

当背景颜色为黑色时，白色svg图标不可见。

12

在SVG为背景时填充SVG颜色

10

SVG图标破坏以下SVG图标的颜色

224

OpenLayers颜色SVG图标

13

在不同背景下更改svg图标的笔画颜色

131

活动推荐

体验智能媒资降冷，云点播优惠不要错过！

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例