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作为内联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

其他回答

因为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

来自@Praveen的答案是可靠的。

我不能让它在我的工作中响应，所以我为它做了一个jquery悬停函数。

CSS

.svg path {
   transition:0.3s all !important;
}

JS / JQuery

// code from above wrapped into a function
replaceSVG();

// hover function
// hover over an element, and find the SVG that you want to change
$('.element').hover(function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#CCC');
}, function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#3A3A3A');
});

2015-01-29 21:04:59

在您的案例中，主要问题是您从<img>标记导入svg，该标记将隐藏svg结构。

您需要将<svg>标记与<use>结合使用以获得所需的效果。要使其工作，您需要在SVG文件<path id='myName'…>，然后能够从<use xlink:href="#myName"/>标签检索它们。试试下面剪的。

.icon { display: inline-block; width: 2em; height: 2em; transition: .5s; fill: currentColor; stroke-width: 5; } .icon:hover { fill: rgba(255,255,255,0); stroke: black; stroke-width: 2; } .red { color: red; } .blue { color: blue; } <svg width="0" height="0"> <defs> <path id="home" d="M100 59.375l-18.75-18.75v-28.125h-12.5v15.625l-18.75-18.75-50 50v3.125h12.5v31.25h31.25v-18.75h12.5v18.75h31.25v-31.25h12.5z"/> </svg> <span class="icon red"> <svg viewbox="0 0 100 100"> <use xlink:href="#home"/> </svg> </span> <span class="icon blue"> <svg viewbox="0 0 100 100"> <use xlink:href="#home"/> </svg> </span>

注意，如果您想从外部源加载SVG(而不是将其嵌入到HTML中)，则可以将任何URL放在片段#之前。另外，通常不需要在CSS中指定填充。最好考虑在SVG本身中使用fill:"currentColor"。相应元素的CSS颜色值将被使用到位。

2018-06-06 09:16:21

简单的 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

尝试纯CSS:

.logo-img {
  /* to black */
  filter: invert(1);
  /* or to blue */
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}

更多信息请参见本文https://blog.union.io/code/2017/08/10/img-svg-fill/

2018-08-27 14:43:47

img src SVG用CSS改变样式

推荐文章

最新文章

标签