改变svg颜色

Question

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

Answer 1

要更改任何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标签,如路径,圆形,多边形等.在那里你可以借助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

Answer 2

我遵循的步骤更改任何SVG的颜色:

• 首先,使用img标签添加SVG图像

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

• 使用以下Codepen(单击此处打开codepen)将任何HEX颜色代码转换为过滤器:

例如,#00EE00的输出是

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

• 创建一个新类并将此过滤器添加到此类中.

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

• 现在将此类添加到图像标记中,SVG的颜色将更改为我们提供的HEX.

Answer 3

您不能以这种方式更改图像的颜色.如果您将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);
}

然后,您可以更改内联元素的颜色:

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

Answer 4

解决方案 1 - 编辑 SVG 以指向 currentColor

<svg>... fill: currentColor stroke: currentColor ...</svg>

然后你可以从 CSS 内容中控制描边和填充的颜色：

svg {
  color: blue; /* Or any color of your choice. */
}

优点和缺点：

• 简单并使用传统支持的 CSS。

适合如果：

• 您控制 SVG
• SVG 可以内联包含在 HTML 中。

解决方案 2 - CSS mask 属性

<i class="icon"></i>

  .icon {
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-image: url(https://url.of.svg/....svg);
    mask-image: url(https://url.of.svg/....svg);
    background-color: blue; /* Or any color of your choice. */
    width: 20px;
    height: 20px;
  }

}

优点和缺点

• 比较容易使用
• 浏览器对maskCSS 属性的支持是部分的。

适合如果：

• SVG 是外部的，通过 URL 包含
• 旨在用于现代已知的浏览器。

解决方案 3 - CSS Filter 属性 - 静态颜色

如果预先知道颜色，您可以使用https://codepen.io/sosuke/pen/Pjoqqp找到将 SVG 更改为所需颜色所需的过滤器。例如，要将 svg 转换为#00f：

<img src="https://url.of.svg/....svg" class="icon">

.icon {
    filter: invert(8%) sepia(100%) saturate(6481%) hue-rotate(246deg) brightness(102%) contrast(143%);
}

如果您的原始颜色不是黑色，请在滤镜列表中添加前缀，brightness(0) saturate(100%)以首先将其转换为黑色。

优点和缺点：

• 结果与所需颜色之间可能存在微小的、不显着的差异。

适合如果：

• 所需的颜色是预先知道的。
• 外部形象

Answer 5

添加了测试页面 - 通过过滤器设置为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/

Answer 6

如果要动态更改颜色：

1. 在代码编辑器中打开 de svg
2. 将fill每个路径的属性添加或重写为fill="currentColor"
3. 现在，该 svg 将采用字体颜色的颜色，因此您可以执行以下操作：

svg {
    color : "red";
}

Answer 7

带有背景颜色的框元素上的SVG蒙版将导致：

body{ overflow:hidden; }

.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;
  animation: 4s frames infinite linear;
  
  -webkit-mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg);
  mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg);
}

@keyframes frames {
  0% { transform:translatex(100vw) }
  25% { background: red; }
  75% { background: lime; }
  100% { transform:translatex(-100%) }
}

<i class="icon icon-bike" style="--size:150px"></i>

_{注 - Internet Explorer浏览器不支持 SVG 掩码}

Answer 8

只有带路径信息的SVG.你不能对图像这样做..作为你可以改变strock和填充信息的路径,你就完成了.喜欢Illustrator

所以:通过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>

Answer 9

您可以尝试使用过滤器黑客：

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

.colorize-navy {
  filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}

.colorize-blue {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}

Answer 10

最简单的方法是使用https://icomoon.io/app/#/select等服务从SVG创建字体.上传你的SVG,点击"生成字体",包括字体文件和css到你身边,只需使用和任何其他文本样式.我总是这样使用它,因为它使造型更容易.

编辑:正如文章中提到的@ CodeMouse92图标字体搞砸了屏幕阅读器(并且可能对SEO不利).所以要坚持使用SVG.

Answer 11

1. 方法一

   简单又有效的方法：

   使用任何文本编辑器打开 .svg 文件

   <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 477.526 477.526" style="enable-background:new 0 0 477.526 477.526;
      fill: rgb(109, 248, 248);" xml:space="preserve">
   <svg />
   

   给出一个样式属性并用颜色填充它。

2. 其他方式

   在你的形状中填充颜色。这里我有矩形形状fill="white"。

   <svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
       <g>
           <title>background</title>
           <rect fill="#fff" id="canvas_background" height="602" width="802" y="-1"
            x="-1"/>
   
               <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%"
                  id="canvasGrid">
   
                  <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%"
                  width="100%"/>
               </g>
       </g>
   </svg>
   

Answer 12

2022年Web组件<load-file>答案

此（7 行）本机 Web 组件(JSWC) 加载外部内容，并将其注入到 DOM 中。

我的DEV 博客文章中对此进行了解释和记录： <load-file> Web Component。

完整源代码：

customElements.define("load-file", class extends HTMLElement {

  // declare default connectedCallback as sync so await can be used
  async connectedCallback(
      // call connectedCallback with parameter to *replace* SVG (of <load-file> persists)
      src = this.getAttribute("src"),
    // attach a shadowRoot if none exists (prevents displaying error when moving Nodes)
    // declare as parameter to save 4 Bytes: 'let '
    shadowRoot = this.shadowRoot || this.attachShadow({mode:"open"})
  ) {
      // load SVG file from src="" async, parse to text, add to shadowRoot.innerHTML
    shadowRoot.innerHTML = await (await fetch(src)).text()

    // append optional <tag [shadowRoot]> Elements from inside <load-svg> after parsed <svg>
    shadowRoot.append(...this.querySelectorAll("[shadowRoot]"))

    // if "replaceWith" attribute
    // then replace <load-svg> with loaded content <load-svg>
    // childNodes instead of children to include #textNodes also
    this.hasAttribute("replaceWith") && this.replaceWith(...shadowRoot.childNodes)
  }
})

<load-file src="//load-file.github.io/heart.svg">
  <!-- elements inside load-file are MOVED to shadowDOM -->
  <style shadowRoot>
    svg {
      height: 180px; /* Stack Overflow subwindow height */
    }
    path:nth-child(2n+2) {
      fill: GREEN; /* shadowDOM style does NOT style global DOM */
    }
  </style>
</load-file>

Answer 13

定位 svg 中的路径：

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

您可以进行内联，例如：

<path fill="#ccc">

或者

svg{
   path{
        fill: #ccc

Answer 14

要更改 SVG 元素的颜色，我在检查下面的 Google 搜索框搜索图标时找到了一种方法：

.search_icon {
  color: red;
  fill: currentColor;
  display: inline-block;
  width: 100px;
  height: 100px;
}

<span class="search_icon">
    <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>
</span>

我使用了带有“display:inline-block”、高度、宽度的 span 元素，并将特定样式“color: red; fill: currentColor; ”设置为由子 svg 元素继承的 span 标签。

Answer 15

如果必须使用不同颜色多次使用相同的 SVG，请在用作主副本的隐藏 SVG 中定义路径集。然后放置引用主路径的新实例及其各自的填充。

注意：此方法仅适用于内联<svg>标签。它不适用于<img>加载文件的标签.svg。

:root {
  fill: gray;
}

.hidden {
  display: none;
}

svg {
  width: 1em;
  height: 1em;
}

<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="hidden">
 <path id="s_fave" d="m379 21c-57 0-104 53-123 78-19-25-66-78-123-78-74 0-133 68-133 151 0 45 18 88 49 116 0.5 0.8 1 2 2 2l197 197c2 2 5 3 8 3s5-1 8-3l206-206c2-2 3-3 5-5 0.8-0.8 1-2 2-3 23-28 35-64 35-102 0-83-60-151-133-151z"/>
 <path id="s_star" d="m511 196c-3-10-13-18-23-19l-148-13-58-137c-4-10-14-17-25-17-11 0-21 6-25 17l-58 137-148 13c-11 1-20 8-23 19-3 10-0.3 22 8 29l112 98-33 145c-2 11 2 22 11 28 5 3 10 5 16 5 5 0 10-1 14-4l127-76 127 76c9 6 21 5 30-1 9-6 13-17 11-28l-33-145 112-98c8-7 11-19 8-29z"/>
</svg>

<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave" fill="red"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star" fill="gold"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave" fill="purple"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star" fill="silver"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave" fill="pink"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star" fill="blue"></use></svg>

Answer 16

如果您使用一些技巧，则可以使用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背景图片的元素实现了此功能，其工作原理与此相似。但是无论如何，您都必须修改此脚本以适合您的情况。希望能有所帮助。

Answer 17

查看此代码。有用。

<div>
   <!-- YouTube -->
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
       <path fill="white"
           d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z" />
   </svg>

   <!-- Instagram -->
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
       <path fill="white"
           d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z" />
   </svg>
</div>

CSS

svg {
   fill: white;
}

Answer 18

要简单地更改svg的颜色：

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

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

Answer 19

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

Answer 20

这里是速度与激情的方式:)

 body{
 background-color: #deff05;
 }
 
 svg{
   width: 30%;
    height: auto;
 }
 
 svg path {
    color:red;
    fill: currentcolor;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 514.666 514.666"><path d="M514.666,210.489L257.333,99.353L0,210.489l45.933,19.837v123.939h30V243.282l33.052,14.274v107.678l4.807,4.453  c2.011,1.862,50.328,45.625,143.542,45.625c93.213,0,141.53-43.763,143.541-45.626l4.807-4.452V257.557L514.666,210.489z   M257.333,132.031L439,210.489l-181.667,78.458L75.666,210.489L257.333,132.031z M375.681,351.432  c-13.205,9.572-53.167,33.881-118.348,33.881c-65.23,0-105.203-24.345-118.348-33.875v-80.925l118.348,51.112l118.348-51.111  V351.432z"></path></svg>

Answer 21

我发现它有点笨拙，但这绝对是动态更改tag包含的<img>SVG 颜色的有效方法。

在 SVG 文件中，您可以通过以下方式添加 CSS 内容：

<svg ...>
    <defs>
        <style>
            ...
        <style>
    <defs>

在那里，您可以使用@media规则，SVG 可以通过该规则在自身外部查找上下文环境。有一个适用于 SVG 框（例如标签）的长宽比<img>媒体功能。您可以通过稍微拉伸 SVG 框来为 SVG 创建不同的上下文。

通过这种方式，您还可以使网站图标与网站上显示的 SVG 相同，但颜色不同。（在这种情况下，其他 SVG 框不应该是正方形的。）

/* img stretched horizontally (if SVG is square-shaped) */
@media (min-aspect-ratio: 1000/999) {
    path {
        fill: blue;
    }
}

/* img stretched vertically (if SVG is square-shaped) */
@media (max-aspect-ratio: 999/1000) {
    path {
        fill: green;
    }
}

/* img with exact sizes */
@media (aspect-ratio: 86/74) {
    path {
        fill: red;
    }
}

/* favicon with light browser theme */
@media (aspect-ratio: 1/1) and (prefers-color-scheme: light) {
    path {
        fill: black;
    }
}

/* favicon with dark browser theme */
@media (aspect-ratio: 1/1) and (prefers-color-scheme: dark) {
    path {
        fill: white;
    }
}

一件非常重要的事情

SVG必须包含viewBox信息，这样拉伸才不会影响图形。例子：

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">