CSS修改SVG图像的颜色

orange plastic blocks on white surface
tencent promotion
原创作者： Fengjiajun 发布日期：2024年6月5日

CSS修改SVG图像的颜色

如果想要修改一个svg图像的颜色，用传统的CSS属性color或background都是无效的，需要用到fill或stroke属性，如下所示：

svg {
  fill: red; /* 修改填充颜色 */
  stroke: blue; /* 修改边框颜色 */
}

 

关于作者

80后，现居于深圳【如果你也在深圳可以线下约起来】，具有多年独立站实操运营经验，带领过品牌运营团队，属于独立站实战派人士！2019年之前，我是一名疯狂的WordPress技术爱好者，精通独立站或官网的建站，熟悉 PHP、CSS 、HTML等网页编程语言，能够快速搭建网站；2019年开始，我发现纯粹的建站技术已经满足不了我的职业规划需求，于是，向数字营销领域进军了；截止目前，在谷歌ADS广告、GMC领域已经累计了近5年的实操经验；在Bing广告和Facebook广告领域也有近2年的实操经验；我的专长不仅仅局限于建站技术层面，从底层的建站技术到品牌运营策略【ADS广告、KOL红人、PR媒体公关、SEO等】都有深刻的见解！如果你在如下方面有需要协助，可以随时联系我微信：f13714022672

相关文章

174 月

谷歌是如何衡量一个网站的速度？

当我们的网站上线后，【网站速度】是绕不开的一个重要问题，它已成为决定用户体验和搜索引擎排名的关键因素。为什么网站速度如此重要？在深入探讨技术细节之前，我们先了解一下为什么要如此重视网站速度： 1，用户体验：研究显示，40%的用户会放弃加载时间超过3秒的网站； 2，转化率：每提高1秒的加载速度，转化率可能提升2%； 3，SEO排名：网站速度已成为谷歌搜索排名因素之一； 4，移动优先：随着移动设备使用量激增，移动端的速度性能指标变得尤为关键；那么回到我们的主题，谷歌是如何衡量一个网站的速度？谷歌采用一种标准化指标【PageSpeed Insights】来评估网站速度性能，这些指标统称为"Core Web Vitals"（核心网页指标）。让我们详细了解这些关键指标： 【关于PageSpeed Insights，之前有写过一篇文章介绍，详细请参考https://fengjiajun.com/5418.html】1. Largest Contentful Paint (LCP) - 最大内容绘制：测量页面主要内容加载完成的时间。 2. First Input Delay (FID) - 首次输入延迟：测量从用户首次与页面交互到浏览器实际响应的时间，即使页面看起来已加载完成，如果JavaScript仍在执行，用户可能会遇到延迟。 3. Cumulative Layout Shift... read more

134 月

网站域名解析：用【双A】还是【A+CNAME】？

在搭建网站时，域名解析（DNS）是必不可少的一环。常见的解析方式有两种： 第一种是双A记录（@和www都直接指向IP）； 第二种是A记录加CNAME（@指向IP，www CNAME指向主域名）。这两种方式有什么区别？1. 两种解析方式对比方式1：双A记录（@和www都解析到IP） 配置示例： A记录 → @ → 1.1.1.1 A记录 → www → 1.1.1.1 特点： - 解析速度快：A记录直接指向IP，没有额外跳转 - 独立控制：www和@可以指向不同的IP（适用于特殊场景） - 维护稍麻烦：如果服务器IP变更，需要同时修改两条记录方式2：A记录 + CNAME（www指向主域名） 配置示例： A记录 → @ → 1.1.1.1 CNAME... read more

085 月

利用CSS的nth-child属性控制多个相同的元素

首先我们看这段代码： <p class="forminator-row">The first paragraph.</p> <p class="forminator-row">The second paragraph.</p> <p class="forminator-row">The third paragraph.</p> <p class="forminator-row">The fourth paragraph.</p> 如果我想单独控制第一个或第二个的CSS属性，此时就需要借助nth-child属性，用法如下： .forminator-row:nth-child(1){ background:#ccc; } .forminator-row:nth-child(2){ ... read more

white smartphone on two softbound books
085 月

position: sticky置顶菜单栏不生效的解决办法

现在很多网站都比较流行这个功能：当往下滚动页面时，导航菜单栏需要固定在顶部，这样方便访客快捷操作。比较好用的一个方法就是使用CSS的position: sticky属性。但由于该属性会受到多种因素的影响从而失效。本教程给出了一个解决办法。默认情况下，我们可以用下面的CSS代码来控制菜单栏在鼠标下滑滚动时置顶菜单栏，让菜单栏一直可见，比如菜单栏所在的div class为menu： .menu { position: sticky; top: 0px; z-index: 10000000000; } 但有个例外，如果你的菜单栏所属div层级比较复杂，比如菜单栏的div上面还有多个父级div，此时，上面的代码可能会失效；我们可以对上面的代码稍加改动；比如菜单栏所在的上一级div class为header： .header... read more