如何更改svg元素的颜色？

344

我想使用这项技术http://css-tricks.com/svg-fallbacks/并更改svg颜色，但到目前为止我还没有做到这一点。我把它放在css中，但是无论如何我的图像总是黑色的。我的代码：

.change-my-color {
  fill: green;
}
<svg>
    <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>
展开摘要

css  svg 
— 芭芭拉
source
我不是svg专家，但您是否尝试过将填充更改为背景颜色？
— 梅格2014年
svg background-color中的@Megan是通过'fill'属性指定的，边框是'stroke'的（就像在Illustrator中一样）。w3.org/TR/SVG/propidx.html
— 芭芭拉
4
HTML文档中的CSS不适用于<img />中的SVG元素
— pawel 2014年
1
现在这是可能的。简单实用的答案在这里：stackoverflow.com/a/53336754/467240
— mtyson

Answers:

188

您不能以这种方式更改图像的颜色。如果将SVG加载为图像，则无法在浏览器中使用CSS或Javascript更改其显示方式。

如果你想改变你的SVG图像，你必须用它来装载<object>，<iframe>或使用<svg>在线。

如果要使用页面中的技术，则需要Modernizr库，您可以在其中检查SVG支持并有条件地显示或不显示后备图像。然后，您可以内联SVG并应用所需的样式。

见：

显示代码段

您可以内嵌SVG，并使用类名称（my-svg-alternate）标记后备图片：

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

在CSS中，使用no-svgModernizr中的类（CDN：http：//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js）来检查SVG支持。如果不支持SVG，将忽略SVG块并显示图像，否则将图像从DOM树（display: none）中删除：

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

然后，您可以更改内联元素的颜色：

#time-3-icon {
   fill: green;
}
— Holderdarocha
source
5
您不能object根据托管文档设置嵌入式SVG的样式。
— 哈维尔·雷
1
@JavierRey，您可以通过javascript将样式注入到对象标签的内容中。但是您是对的，如果仅将其添加到托管文档的样式表中，则它不适用。
— 罗伯特·朗森
2
我正在使用@ manish-menaria的解决方案，它的工作原理非常完美。
— 瑞安·埃利斯
1
接受的答案应该更改为：stackoverflow.com/a/53336754/467240
— mtyson
371

2020年答案

CSS筛选器可在所有当前浏览器上使用

更改任何SVG颜色

  1. 使用<img>标签添加SVG图片。
<img src="dotted-arrow.svg" class="filter-green"/>
  1. 要过滤为特定颜色，请使用以下Codepen（单击此处以打开Codepen）将十六进制颜色代码转换为CSS过滤器：

例如，输出#00EE00是

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
  1. 将CSS添加filter到此类中。
    .filter-green{
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }
— Manish Menaria
source
5
这种带有常用的警告有关不旧版浏览器所支持：developer.mozilla.org/en-US/docs/Web/CSS/...
— 凯文·王
17
如CodePen所述，如果您的SVG不是黑色（我的是灰色的），brightness(0) saturate(100%)则将其添加到滤镜列表的开头会首先将其变为100％黑色，这使其他滤镜可以将其更改为正确的颜色。
— jdunning
2
另外，在此StackOverflow问题中，有关解决方案的许多引人入胜的背景也为CodePen提供了信息。
— jdunning
3
我的家伙。该支持似乎可以接受caniuse.com/#feat=css-filters。
— 山姆·道奇
效果很好，使用此非关联的codepen将我的hex放入过滤器中：codepen.io/sosuke/pen/Pjoqqp
— WEBjuju
219

要更改任何SVG的颜色，您可以通过在任何文本编辑器中打开svg文件来直接更改svg代码。该代码可能类似于以下代码

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <g>
        <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
            C181.113,454.921,171.371,464.663,161.629,474.404z"/>
    /*Some more code goes on*/
    </g>
    </svg>

您可以观察到有一些XML标签，例如path，circle，polygon等。在这里，您可以借助style属性添加自己的颜色。看下面的例子

<path style="fill:#AB7C94;" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                C181.113,454.921,171.371,464.663,161.629,474.404z"/>

将style属性添加到所有标签，以便获得所需颜色的SVG

— sushant047
source
48
为什么不直接使用属性fill如下：fill = "#AB7C94"？不确定为什么style需要该属性
— bg17aw
4
丹尼尔，您好，是的 我不知道填充可以用作属性。抱歉，这么长时间没有收到您的评论@ bg17aw
— sushant047
19

仅具有路径信息的SVG。您不能对图像执行此操作。作为路径，您可以更改笔触和填充信息，然后就完成了。像插画家

因此：通过CSS您可以覆盖路径fill值

path { fill: orange; }

但是，如果您想要更灵活的方式，并且想在发生悬停效果时使用文本进行更改，则可以使用。 

path { fill: currentcolor; }

body {
  background: #ddd;
  text-align: center;
  padding-top: 2em;
}

.parent {
  width: 320px;
  height: 50px;
  display: block;
  transition: all 0.3s;
  cursor: pointer;
  padding: 12px;
  box-sizing: border-box;
}

/***  desired colors for children  ***/
.parent{
  color: #000;
  background: #def;
}
.parent:hover{
  color: #fff;
  background: #85c1fc;
}

.parent span{
  font-size: 18px;
  margin-right: 8px;
  font-weight: bold;
  font-family: 'Helvetica';
  line-height: 26px;
  vertical-align: top;
}
.parent svg{
  max-height: 26px;
  width: auto;
  display: inline;
}

/****  magic trick  *****/
.parent svg path{
  fill: currentcolor;
}
<div class='parent'>
  <span>TEXT WITH SVG</span>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
</svg>
</div>
展开摘要

— 比斯克雷姆·穆罕默德（Biskrem Muhammad）
source
12

最简单的方法是使用https://icomoon.io/app/#/select之类的服务在SVG中创建字体。上传您的SVG，点击“生成字体”，将字体文件和CSS添加到您的身边，然后像其他任何文本一样使用和设置其样式。我总是这样使用它，因为它使样式更加容易。

编辑：正如@ CodeMouse92评论的文章中提到的，图标字体使屏幕阅读器混乱（并且可能对SEO不利）。因此，请坚持使用SVG。

— 菲利克斯·哈格斯彼尔（Felix Hagspiel）
source
4
这也弄乱了屏幕阅读器。参见Seren Davies
— 撰写的
6

如果您使用一些技巧，则可以使用CSS更改SVG着色。我为此写了一个小脚本。

  • 浏览具有svg图像的元素列表
  • 将svg文件加载为xml
  • 仅提取svg部分
  • 改变路径的颜色
  • 用修改后的svg替换src作为内嵌图像
$('img.svg-changeable').each(function () {
  var $e = $(this);
  var imgURL = $e.prop('src');

  $.get(imgURL, function (data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');

    // change the color
    $svg.find('path').attr('fill', '#000');

    $e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML')));
  });

});

上面的代码可能无法正常工作，我已经为具有svg背景图片的元素实现了此功能，其工作原理与此相似。但是无论如何，您都必须修改此脚本以适合您的情况。希望能有所帮助。

— 赛多克
source
顺便说一句：如果您是RoR开发人员，则可以为sass预编译器添加一个新方法，该方法也可以完成此工作。这样会更好，因为您将在已编译的css文件中使用base64编码的正确彩色图像。不再需要JS！也许我可以提供自己编写的代码，而必须与CTO交流。
— cydoc
2
+1用于提供解决方案，而不是说不能解决。这个答案也很重要：stackoverflow.com/questions/11978995/…–
— claytronicon
6

具有背景色的框元素上的SVG 蒙版将产生：

.icon{
  --size     : 70px;
  display    : inline-block;
  width      : var(--size);
  height     : var(--size);
  transition : .12s;
  -webkit-mask-size: cover;
  mask-size  : cover;
}

.icon-bike{
  background: black;
  -webkit-mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg);
  mask-image: url(hhttps://image.flaticon.com/icons/svg/89/89139.svg);
  animation: 1s frames infinite ease;
}

@keyframes frames {
  50% { background:red;  }
}
<i class="icon icon-bike" style="--size:150px"></i>
展开摘要

注意-Internet Explorer浏览器不支持SVG掩码

— 垂直同步
source
5

在svg中定位路径：

<svg>
   <path>....
</svg>

您可以内联，例如：

<path fill="#ccc">

要么

svg{
   path{
        fill: #ccc
— 迈克尔·菲利普
source
2

如果要对内嵌svg进行此操作，例如，在CSS中添加背景图片，请执行以下操作：

background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(31,159,215,1)' viewBox='...'/%3E%3C/svg%3E");
展开摘要

当然，用您的内嵌图片代码替换...

— 视觉蜂巢
source
2

例如，在您的HTML中：

<body>
  <svg viewBox="" width="" height="">
    <path id="struct1" fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
  </svg>
</body>

使用jQuery：

$("#struct1").css("fill","<desired colour>");
— 病毒97
source
仅当您在HTML中内嵌SVG文件时，此方法才有效。我已经编辑了您的答案，以使您明白这一点。
— Flimm
0

实际上，有一个非常灵活的解决方案：编写一个Web组件，该组件将在运行时将SVG修补为文本。还以要点发布，带有指向JSFiddle的链接

👍滤镜：反转（42％）棕褐色（93％）饱和（1352％）色相旋转（87deg）亮度（119％）对比度（119％）;

<html>

<head>
  <title>SVG with color</title>
</head>

<body>
  <script>
    (function () {
      const createSvg = (color = '#ff9933') => `
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="76px" height="22px" viewBox="-0.5 -0.5 76 22">
            <defs/>
              <g>
                <ellipse cx="5" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <ellipse cx="70" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <path d="M 9.47 12.24 L 17.24 16.12 Q 25 20 30 13 L 32.5 9.5 Q 35 6 40 9 L 42.5 10.5 Q 45 12 50 6 L 52.5 3 Q 55 0 60.73 3.23 L 66.46 6.46" fill="none" stroke="#ff9933" stroke-miterlimit="10" pointer-events="stroke"/>
              </g>
          </svg>`.split('#ff9933').join(color);

      function SvgWithColor() {
        const div = Reflect.construct(HTMLElement, [], SvgWithColor);
        const color = div.hasAttribute('color') ? div.getAttribute('color') : 'cyan';
        div.innerHTML = createSvg(color);
        return div;
      }

      SvgWithColor.prototype = Object.create(HTMLElement.prototype);
      customElements.define('svg-with-color', SvgWithColor);

      document.body.innerHTML += `<svg-with-color
        color='magenta' 
      ></svg-with-color>`;

    })();

  </script>
</body>

</html>
— 彼得·特里普尔斯基
source
-1

最短的Bootstrap兼容方式，没有JavaScript：

.cameraicon {
height: 1.6em;/* set your own icon size */
mask: url(/camera.svg); /* path to your image */
-webkit-mask: url(/camera.svg) no-repeat center;
}

并像这样使用它：

<td class="text-center">
    <div class="bg-secondary cameraicon"/><!-- "bg-secondary" sets actual color of your icon -->
</td>
— 沃尔夫雷沃猫
source
-1

只需在图像的svg标签中添加fill：“ desiredColor”：示例：

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#bbb9c6">
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
— 西瓦尼
source
这基本上是相同的建议为这个答案还是这一个
— 罗伯特Longson
这些答案已经提到了在path标记中填写，它在svg标记中对我有用，因此我将其发布了
— Shivani，
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.