img src SVG用CSS改变样式

html

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

css

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

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

当前回答

为了扩展@gringo的答案，在其他答案中描述的Javascript方法是有效的，但需要用户下载不必要的图像文件，而且在我看来，它会膨胀你的代码。

I think a better approach would be to to migrate all 1-color vector graphics to a webfont file. I've used Fort Awesome in the past, and it works great to combine your custom icons/images in SVG format, along with any 3rd party icons you may be using (Font Awesome, Bootstrap icons, etc.) into a single webfont file the user has to download. You can also customize it, so you only include the 3rd party icons you're using. This reduces the number of requests the page has to make, and you're overall page weight, especially if you're already including any 3rd party icons libraries.

如果你更喜欢一个更面向开发的选项，你可以谷歌"npm svg webfont"，并使用一个最适合你的环境的节点模块。

一旦你完成了这两个选项中的任何一个，那么你就可以很容易地通过CSS改变颜色，而且很可能，你已经在这个过程中加快了你的网站。

2017-05-17 23:51:05

其他回答

因此，您必须将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

如果你的形状总是一种纯色，而且你有两个以上的纯色，你可以使用Fontello，用你自己的一系列自定义SVG形状制作一个自定义图标字体。然后你可以单独用CSS设置/动画它们的大小和颜色。

对于这个问题的所有可能的用例，这是一个需要考虑的基本范例。我在很多项目中都使用过它。无论如何，如果你没有听说过Fontello，你需要去了解一下。如果你知道一个类似的更好的解决方案，我很想知道。

可能的失败:

众所周知，图标/形状字体会干扰屏幕阅读器，所以这可能需要一些处理。 Fontello在导入形状时可能很挑剔，在创建和导出形状时可能需要一些尝试和错误。避免任何和所有分组，只使用单一的非嵌套复合形状。

2021-03-30 06:54:30

我只想改变特定的路径和/或颜色，甚至不同的路径上色。此外，在我的情况下，一些CSS被应用到img标签直接，因此我想让它是原始的img元素，而不是混乱的定位和对齐。

感谢这个答案的启发:https://stackoverflow.com/a/43015413/1444589，这对我来说很有效:

let img = document.querySelector('img[class^="YourClassName"]');
let imgURL = img.src;

fetch(imgURL)
  .then(response => response.text())
  .then(text => {
    let parser = new DOMParser();
    let xmlDoc = parser.parseFromString(text, 'text/xml');
    let svg = xmlDoc.getElementsByTagName('svg')[0];
    let paths = xmlDoc.getElementsByTagName('path');

    // access individual path elements directly
    let leftShape = paths[0];
    leftShape.setAttribute('fill', '#4F4F4F');

    // or find specific color
    const pathsArr = Array.from(paths);
    let skirtShape = pathsArr.find(path => path.getAttribute('fill') === '#F038A5');
    skirtShape.setAttribute('fill', '#0078D6');

    // Replace old SVG with colorized SVG
    // positioning and alignment is left untouched
    let base64Str = btoa(new XMLSerializer().serializeToString(svg));
    img.src = 'data:image/svg+xml;base64, ' + base64Str;
  });

2022-04-08 13:48:57

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

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

2016-10-26 21:15:21

img src SVG用CSS改变样式

推荐文章

最新文章

标签