img src SVG用CSS改变样式

html

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

css

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

上面的svg加载并本机填充:#fff，但当我使用上面的css尝试将其更改为黑色时，它没有改变，这是我第一次使用svg，我不知道为什么它不工作。

当前回答

使用滤镜转换为任何颜色。

我最近发现了这个解决方案，希望有人能使用它。由于该解决方案使用过滤器，它可以用于任何类型的图像。不仅仅是svg。

如果你有一张单色图像，你只是想改变它的颜色，你可以在一些滤镜的帮助下做到这一点。当然，它也适用于多色图像，但你不能针对特定的颜色。只有整个图像。

过滤器来自于如何仅使用CSS过滤器将黑色转换为任何给定颜色中提出的脚本如果您想将白色更改为任何颜色，您可以在每个过滤器中调整反转值。

.startAsBlack{ display: inline-block; width: 50px; height: 50px; background: black; } .black-green{ filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(128%) contrast(119%); } .black-red{ filter: invert(37%) sepia(93%) saturate(7471%) hue-rotate(356deg) brightness(91%) contrast(135%); } .black-blue{ filter: invert(12%) sepia(83%) saturate(5841%) hue-rotate(244deg) brightness(87%) contrast(153%); } .black-purple{ filter: invert(18%) sepia(98%) saturate(2657%) hue-rotate(289deg) brightness(121%) contrast(140%); } Black to any color: <br/> <div class="startAsBlack black-green"></div> <div class="startAsBlack black-red"></div> <div class="startAsBlack black-blue"></div> <div class="startAsBlack black-purple"></div>

2019-12-19 13:49:01

其他回答

因此，您必须将SVG作为内联HTML使用。

说这是你的logo.svg代码(当你在textEditor上打开它):

Logo.SVG

<svg width="139" height="100" xmlns="http://www.w3.org/2000/svg">
    <!-- Note that I've Added Class Attribute 'logo-img' Here -->
    <g transform="translate(-22 -45)" fill="none" fill-rule="evenodd">
        <path
            d="M158.023 48.118a7.625 7.625 0 01-.266 10.78l-88.11 83.875a7.625 7.625 0 01-10.995-.5l-33.89-38.712a7.625 7.625 0 0111.475-10.045l28.653 32.73 82.353-78.394a7.625 7.625 0 0110.78.266z"
            fill="#00000" />
    </g>
</svg>

添加你想要的Class/ID到它(我添加了'logo-img'):

编辑Svg

<svg class="logo-img" width="139" height="100" xmlns="http://www.w3.org/2000/svg">
    <!-- Note that I've Added Class Attribute 'logo-img' Here -->
    ...
</svg>

现在应用你的Css规则:

CSS

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

Pro

通过这种方式，您可以对用户的操作(悬停，选中，…)进行动画化。

Con

你的HTML文件会一团糟。

这里是一个堆栈片段

2021-01-05 20:14:03

为什么不创建一个webfont与您的svg图像或图像，导入webfont在css，然后只是改变字形的颜色使用css的颜色属性? 不需要javascript

2016-10-26 21:15:21

因为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:23:32

首先必须将SVG注入到HTML DOM中。

有一个名为SVGInject的开源库可以为您完成这项工作。它使用onload属性来触发注入。

下面是一个使用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-21 12:56:36

简单的 JS

使用以下简短的函数ImgToSvg将img转换为svg(包括类列表)

<img src="logo.svg" onload="ImgToSvg(this)" class="logo-img"/>

const ImgToSvg= async (img) => { const s = document.createElement('div'); s.innerHTML = await (await fetch(img.src)).text(); s.firstChild.classList = img.classList; img.replaceWith(s.firstChild) } .logo-img { fill: yellow; } <img onload="ImgToSvg(this)" class="logo-img" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iMjk2IiBoZWlnaHQ9IjI5NiIgc3R5bGU9InN0cm9rZTojNTU1NTU1O3N0cm9rZS13aWR0aDoyIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtc2l6ZT0iMTgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGFsaWdubWVudC1iYXNlbGluZT0ibWlkZGxlIiBmb250LWZhbWlseT0ibW9ub3NwYWNlLCBzYW5zLXNlcmlmIiBmaWxsPSIjNTU1NTU1Ij4zMDAmIzIxNTszMDA8L3RleHQ+PC9zdmc+" />

这是对Waruyama answer的改进，提供了简短的js函数

2023-02-08 23:37:21

img src SVG用CSS改变样式

推荐文章

最新文章

标签