如何更改svg元素的颜色？

CSS的 CSS

小胖

2020-03-23

我想使用这项技术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>

第3144篇《如何更改svg元素的颜色？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共10个回答

乐 2020.03.23

最短的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>

老丝番长 2020.03.23

例如，在您的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>");

乐米亚 2020.03.23

具有背景色的框元素上的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>

Gil 2020.03.23

在svg中定位路径：

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

您可以内联，例如：

<path fill="#ccc">

要么

svg{
   path{
        fill: #ccc

乐米亚 2020.03.23

要简单地更改svg的颜色：

转到svg文件，然后在样式下，提及填充颜色。

<style>.cls-1{fill:#FFFFFF;}</style>

番长Davaid阿飞 2020.03.23

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

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

番长樱梅 2020.03.23

要更改任何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，多边形等。在那里，您可以借助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

LEYL 2020.03.23

添加了一个测试页-通过“滤镜”设置为SVG着色：

例如 filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

上传SVG并为其着色-Jsfiddle

提出了以下想法：https : //blog.union.io/code/2017/08/10/img-svg-fill/

达蒙 2020.03.23

2020年答案

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

更改任何SVG颜色

使用<img>标签添加SVG图像。

<img src="dotted-arrow.svg" class="filter-green"/>

要过滤为特定颜色，请使用以下Codepen（单击此处以打开Codepen）将十六进制颜色代码转换为CSS过滤器：

例如，输出#00EE00是

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

将CSS添加filter到此类中。

    .filter-green{
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }

凯Near 2020.03.23

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

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

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

见：

#time-3-icon {
   fill: green;
}

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

<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" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
	C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
	C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
	c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
	c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>

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

您可以内嵌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);
}

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