如何改变颜色的SVG图像使用CSS (jQuery SVG图像替换)?

这是我提出的一段方便的代码的自我问答。

目前，还没有一种简单的方法来嵌入SVG图像，然后通过CSS访问SVG元素。使用JS SVG框架有多种方法，但如果您所做的只是制作一个带有翻转状态的简单图标，那么这些方法就过于复杂了。

所以这就是我想到的，我认为这是迄今为止在网站上使用SVG文件的最简单的方法。它的概念来自于早期的文本到图像替换方法，但据我所知，还从未用于svg。

问题是这样的:

我如何在CSS中嵌入SVG并改变其颜色而不使用JS-SVG框架?

当前回答

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(3,122,247)' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

Chnage color: fill='rgb(3,122,247)'

2021-04-26 11:12:28

其他回答

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(3,122,247)' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

Chnage color: fill='rgb(3,122,247)'

2021-04-26 11:12:28

TL/DR:去这里-> https://codepen.io/sosuke/pen/Pjoqqp

解释:

我假设你有这样的html:

<img src="/img/source.svg" class="myClass">

绝对要走过滤路线。您的SVG很可能是黑色或白色的。你可以应用一个过滤器，让它成为你想要的任何颜色，例如，我有一个黑色的svg，我想要薄荷绿。我首先将它反转为白色(这在技术上是所有RGB颜色完全)，然后玩色调饱和度等。正确的做法:

filter: invert(86%) sepia(21%) saturate(761%) hue-rotate(92deg) brightness(99%) contrast(107%);

更好的是，你可以使用一个工具将你想要的十六进制转换成一个过滤器:https://codepen.io/sosuke/pen/Pjoqqp

2020-02-19 19:27:08

因为SVG基本上是代码，所以您只需要内容。我使用PHP来获取内容，但您可以使用任何您想要的内容。

<?php
$content    = file_get_contents($pathToSVG);
?>

然后，我已经打印内容“是”在一个div容器

<div class="fill-class"><?php echo $content;?></div>

最后将规则设置为CSS上的容器的SVG子元素

.fill-class > svg { 
    fill: orange;
}

我用SVG材质图标得到了这个结果:

Firefox 59.0.2(64位)Linux

谷歌Chrome66.0.3359.181 (Build official)(64位)Linux

Opera 53.0.2907.37 Linux

2018-06-06 20:17:41

有一个名为SVGInject的开源库，它使用onload属性来触发注入。你可以在https://github.com/iconfu/svg-inject上找到GitHub项目

下面是一个使用SVGInject的最小示例:

<html>
  <head>
    <script src="svg-inject.min.js"></script>
  </head>
  <body>
    <img src="image.svg" onload="SVGInject(this)" />
  </body>
</html>

图像加载后，onload="SVGInject(this)将触发注入，<img>元素将被src属性中提供的SVG文件的内容所取代。

它解决了SVG注入的几个问题:

svg可以隐藏，直到注射完成。如果在加载时已经应用了样式，这就很重要，否则会导致简短的“无样式内容闪光”。 <img>元素自动注入自身。如果动态添加svg，就不必担心再次调用注入函数。向SVG中的每个ID添加一个随机字符串，以避免在多次注入SVG时在文档中多次使用相同的ID。

SVGInject是纯Javascript，适用于所有支持SVG的浏览器。

声明:我是SVGInject的合著者

2018-09-04 16:04:04

或者你可以使用CSS蒙版，授予浏览器的支持不是很好，但你可以使用一个备用

.frame {
    background: blue;
    -webkit-mask: url(image.svg) center / contain no-repeat;
}

2014-08-14 10:22:46

如何改变颜色的SVG图像使用CSS (jQuery SVG图像替换)?

推荐文章

最新文章

标签