blocks|key|149614|text|来自@Praveen的答案是可靠的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|149615|我不能让它在我的工作中响应，所以我为它做了一个jquery+hover函数。|149616|CSS|offset|length|style|BOLD|149617|.svg+path+{
+++transition:0.3s+all+!important;
}|code-block|syntax|javascript|149618|JS+/+JQuery|149619|//+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');
});|149620|entityMap^0|0|0|0|3|0|0|0|B|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@$F|X|G|Y|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|Z|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|10|8|@$F|11|G|12|H|I]]|9|@]|A|$]]|$1|Q|3|R|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

<p>The answer from @Praveen is solid.</p>

<p>I couldn't get it to respond in my work, so I made a jquery hover function for it. </p>

<p><strong>CSS</strong></p>

<pre><code>.svg path {
   transition:0.3s all !important;
}
</code></pre>

<p><strong>JS / JQuery</strong></p>

<pre><code>// 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');
});
</code></pre>


blocks|key|152401|text|如果您的目标只是更改徽标的颜色，并且不一定需要使用CSS，那么就不要使用javascript或jquery，正如前面的一些答案所建议的那样。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|152402|为了准确地回答最初的问题，只需：|152403|152404|在文本编辑器中打开logo.svg。|ordered-list-item|offset|length|style|CODE|152405|查找fill:+#fff并将其替换为fill:+#000+|152406|152407|例如，在文本编辑器中打开logo.svg时，可能如下所示：|152408|<svg+fill="#000000"+height="24"+viewBox="0+0+24+24"+width="24"+xmlns="http://www.w3.org/2000/svg">
++<path+d="M0+0h24v24H0z"+fill="none"/>
++<path+d="M1+21h22L12+2+1+21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"+fill="#fff"/>
</svg>|code-block|syntax|javascript|152409|..。只需更改填充并保存即可。|152410|entityMap^0|0|0|0|9|8|0|2|A|I|A|0|0|C|8|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|11|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|12|8|@$H|13|I|14|J|K]]|9|@]|A|$]]|$1|L|3|M|5|G|7|15|8|@$H|16|I|17|J|K]|$H|18|I|19|J|K]]|9|@]|A|$]]|$1|N|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1B|8|@$H|1C|I|1D|J|K]]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1E|8|@]|9|@]|A|$T|U]]|$1|V|3|W|5|6|7|1F|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|Y|$]]

<p>If your goal is just to change the color of the logo, and you don't necessarily NEED to use CSS, then don't use javascript or jquery as was suggested by some previous answers.  </p>

<p>To precisely answer the original question, just:</p>

<ol>
<li><p>Open your <code>logo.svg</code> in a text editor. </p></li>
<li><p>look for <code>fill: #fff</code> and replace it with <code>fill: #000</code> </p></li>
</ol>

<p>For example, your <code>logo.svg</code> might look like this when opened in a text editor:</p>

<pre><code>&lt;svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;path d="M0 0h24v24H0z" fill="none"/&gt;
  &lt;path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/&gt;
&lt;/svg&gt;
</code></pre>

<p>... just change the fill and save. </p>


blocks|key|149648|text|为什么不创建一个或多个svg图像的webfont，在css中导入webfont，然后使用css颜色属性更改字形的颜色？不需要javascript|type|unstyled|depth|inlineStyleRanges|entityRanges|data|149649|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Why not create a webfont with your svg image or images, import the webfont in the css and then just change the color of the glyph using the css color attribute?
No javascript needed</p>


blocks|key|149651|text|此答案基于answer+，但使用了脚本的普通JavaScript版本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|149652|需要使SVG成为一个内联SVG。您可以通过向图像添加一个类svg来使用此脚本：|offset|length|style|BOLD|CODE|149653|/*
+*+Replace+all+SVG+images+with+inline+SVG
+*/
document.querySelectorAll('img.svg').forEach(function(img){
++++var+imgID+=+img.id;
++++var+imgClass+=+img.className;
++++var+imgURL+=+img.src;

++++fetch(imgURL).then(function(response)+{
++++++++return+response.text();
++++}).then(function(text){

++++++++var+parser+=+new+DOMParser();
++++++++var+xmlDoc+=+parser.parseFromString(text,+"text/xml");

++++++++//+Get+the+SVG+tag,+ignore+the+rest
++++++++var+svg+=+xmlDoc.getElementsByTagName('svg')[0];

++++++++//+Add+replaced+image's+ID+to+the+new+SVG
++++++++if(typeof+imgID+!==+'undefined')+{
++++++++++++svg.setAttribute('id',+imgID);
++++++++}
++++++++//+Add+replaced+image's+classes+to+the+new+SVG
++++++++if(typeof+imgClass+!==+'undefined')+{
++++++++++++svg.setAttribute('class',+imgClass%2B'+replaced-svg');
++++++++}

++++++++//+Remove+any+invalid+XML+tags+as+per+http://validator.w3.org
++++++++svg.removeAttribute('xmlns:a');

++++++++//+Check+if+the+viewport+is+set,+if+the+viewport+is+not+set+the+SVG+wont't+scale.
++++++++if(!svg.getAttribute('viewBox')+&&+svg.getAttribute('height')+&&+svg.getAttribute('width'))+{
++++++++++++svg.setAttribute('viewBox',+'0+0+'+%2B+svg.getAttribute('height')+%2B+'+'+%2B+svg.getAttribute('width'))
++++++++}

++++++++//+Replace+image+with+new+SVG
++++++++img.parentNode.replaceChild(svg,+img);

++++});

});|code-block|syntax|javascript|149654|然后，现在如果你这样做了：|149655|.logo-img+path+{
++fill:+#000;
}|149656|或者可以是：|149657|.logo-img+path+{
++background-color:+#000;
}|149658|JSFiddle:+|149659|entityMap^0|0|A|5|T|3|0|0|0|0|0|0|0|9|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@$D|11|E|12|F|G]|$D|13|E|14|F|H]]|9|@]|A|$]]|$1|I|3|J|5|K|7|15|8|@]|9|@]|A|$L|M]]|$1|N|3|O|5|6|7|16|8|@]|9|@]|A|$]]|$1|P|3|Q|5|K|7|17|8|@]|9|@]|A|$L|M]]|$1|R|3|S|5|6|7|18|8|@]|9|@]|A|$]]|$1|T|3|U|5|K|7|19|8|@]|9|@]|A|$L|M]]|$1|V|3|W|5|6|7|1A|8|@$D|1B|E|1C|F|G]]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|Y|$]]

<p><em>This answer is based on answer <a href="https://stackoverflow.com/a/24933495/3890888">https://stackoverflow.com/a/24933495/3890888</a> but with a plain JavaScript version of the script used there.</em></p>

<p>You need to make the SVG to be an <strong>inline SVG</strong>. You can make use of this script, by adding a class <code>svg</code> to the image:</p>

<pre><code>/*
 * Replace all SVG images with inline SVG
 */
document.querySelectorAll('img.svg').forEach(function(img){
    var imgID = img.id;
    var imgClass = img.className;
    var imgURL = img.src;

    fetch(imgURL).then(function(response) {
        return response.text();
    }).then(function(text){

        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(text, "text/xml");

        // Get the SVG tag, ignore the rest
        var svg = xmlDoc.getElementsByTagName('svg')[0];

        // Add replaced image's ID to the new SVG
        if(typeof imgID !== 'undefined') {
            svg.setAttribute('id', imgID);
        }
        // Add replaced image's classes to the new SVG
        if(typeof imgClass !== 'undefined') {
            svg.setAttribute('class', imgClass+' replaced-svg');
        }

        // Remove any invalid XML tags as per http://validator.w3.org
        svg.removeAttribute('xmlns:a');

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!svg.getAttribute('viewBox') &amp;&amp; svg.getAttribute('height') &amp;&amp; svg.getAttribute('width')) {
            svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
        }

        // Replace image with new SVG
        img.parentNode.replaceChild(svg, img);

    });

});
</code></pre>

<p>And then, now if you do:</p>

<pre><code>.logo-img path {
  fill: #000;
}
</code></pre>

<p>Or may be:</p>

<pre><code>.logo-img path {
  background-color: #000;
}
</code></pre>

<p><strong>JSFiddle: <a href="http://jsfiddle.net/erxu0dzz/1/" rel="noreferrer">http://jsfiddle.net/erxu0dzz/1/</a></strong></p>


blocks|key|2734379|text|您可以将SVG设置为掩码。这样，设置一个背景颜色就可以作为你的填充颜色。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2734380|HTML|offset|length|style|BOLD|2734381|<div+class="logo"></div>|code-block|syntax|javascript|2734382|CSS|2734383|.logo+{
++background-color:+red;
++-webkit-mask:+url(logo.svg)+no-repeat+center;
++mask:+url(logo.svg)+no-repeat+center;
}|2734384|JSFiddle:+https://jsfiddle.net/KuhlTime/2j8exgcb/|2734385|MDN:+https://developer.mozilla.org/en-US/docs/Web/CSS/mask|2734386|请检查您的浏览器是否支持此功能：https://caniuse.com/#search=mask|2734387|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/KuhlTime/2j8exgcb/|1|https://developer.mozilla.org/en-US/docs/Web/CSS/mask|2|https://caniuse.com/#search=mask^0|0|0|4|0|0|0|3|0|0|0|9|A|13|0|0|0|4|5|1H|1|0|G|W|2|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@$D|1A|E|1B|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1C|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1D|8|@$D|1E|E|1F|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|1G|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1H|8|@$D|1I|E|1J|F|G]]|9|@$D|1K|E|1L|1|1M]]|A|$]]|$1|S|3|T|5|6|7|1N|8|@$D|1O|E|1P|F|G]]|9|@$D|1Q|E|1R|1|1S]]|A|$]]|$1|U|3|V|5|6|7|1T|8|@]|9|@$D|1U|E|1V|1|1W]]|A|$]]|$1|W|3|-4|5|6|7|1X|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]|14|$5|Z|10|11|A|$12|15]]|16|$5|Z|10|11|A|$12|17]]]]

<p>You could set your SVG as a mask. That way setting a background-color would act as your fill color.</p>
<p><strong>HTML</strong></p>
<pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;logo&quot;&gt;&lt;/div&gt;
</code></pre>
<p><strong>CSS</strong></p>
<pre class="lang-css prettyprint-override"><code>.logo {
  background-color: red;
  -webkit-mask: url(logo.svg) no-repeat center;
  mask: url(logo.svg) no-repeat center;
}
</code></pre>
<p><strong>JSFiddle:</strong> <a href="https://jsfiddle.net/KuhlTime/2j8exgcb/" rel="noreferrer">https://jsfiddle.net/KuhlTime/2j8exgcb/</a><br />
<strong>MDN:</strong> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/mask" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/mask</a></p>
<p>Please check whether your browser supports this feature:
<a href="https://caniuse.com/#search=mask" rel="noreferrer">https://caniuse.com/#search=mask</a></p>


blocks|key|152439|text|为了扩展@gringo+answer，在other+answers中描述的Javascript方法是有效的，但需要用户下载不必要的图像文件，并且IMO，它会使您的代码膨胀。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|152440|我认为更好的方法是将所有单色矢量图形迁移到webfont文件中。我过去用过Fort+Awesome，它可以很好地结合你的自定义图标/图片，以及你可能使用的任何第三方图标(字体棒极了，Bootstrap图标等)。转换成用户必须下载的单个webfont文件。你也可以自定义它，这样你就只包含你正在使用的第三方图标。这减少了页面请求的数量，减少了整个页面的权重，特别是当你已经包含了任何第三方图标库的时候。|offset|length|152441|如果您喜欢更面向开发的选项，您可以使用Google+"npm+svg+webfont"，并使用最适合您的环境的节点模块之一。|152442|一旦你完成了这两个选项中的任何一个，你就可以很容易地通过CSS改变颜色，最有可能的是，你已经在这个过程中加速了你的网站。|152443|entityMap|0|LINK|mutability|MUTABLE|url|https://fortawesome.com/|1|https://www.google.com/search?q=npm%2Bsvg%2Bwebfont^0|0|11|C|0|0|J|O|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|S]]]]

<p>To expand on @gringo answer, the Javascript method described in other answers works, but requires the user to download unnecessary image files, and IMO, it bloats your code. </p>

<p>I think a better approach would be to to migrate all 1-color vector graphics to a webfont file. I've used <a href="https://fortawesome.com/" rel="nofollow noreferrer">Fort Awesome</a> 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. </p>

<p>If you prefer a more dev oriented option, you could <a href="https://www.google.com/search?q=npm+svg+webfont" rel="nofollow noreferrer">Google "npm svg webfont"</a>, and use one of the node modules that's most appropriate for your environment.</p>

<p>Once, you've done either of those two options, then you could easily change the color via CSS, and most likely, you've sped up your site in the process.</p>


blocks|key|151073|text|本例中的主要问题是从<img>标记导入svg，这将隐藏SVG结构。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|151074|您需要将<svg>标记与<use>结合使用才能获得所需的效果。要使其正常工作，需要为要在SVG文件<path+id='myName'...>中使用的路径提供一个id，以便能够从<use+xlink:href="#myName"/>标记中检索它们。试试下面的片段。|151075|​|151076|.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;
++}|code-block|syntax|javascript|151077|<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>|151078|151079|请注意，如果您希望从external+source加载#+(而不是将其嵌入到您的external+source中)，则可以将任何URL放在片段SVG之前。而且，通常您不会指定CSS中的填充。最好考虑在SVG本身中使用fill:"currentColor"。然后将使用相应元素的CSS颜色值。|151080|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/svg-use-external-source/|1^0|A|5|0|4|5|C|5|1D|L|28|2|2G|R|0|0|0|0|0|R|1|30|J|A|F|0|14|F|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1G|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1H|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1I|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1J|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1K|8|@$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]]|D|@$9|1P|A|1Q|1|1R]|$9|1S|A|1T|1|1U]]|E|$]]|$1|T|3|-4|5|6|7|1V|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]|11|$5|W|X|Y|E|$Z|10]]]]

<p>The main problem in your case is that you are importing the svg from an <code>&lt;img&gt;</code> tag which will hide the SVG structure.</p>

<p>You need to use the <code>&lt;svg&gt;</code> tag in conjunction with the <code>&lt;use&gt;</code> to get the desired effect. To make it work, you need to give an <code>id</code> to the path you want to use in the SVG file <code>&lt;path id='myName'...&gt;</code> to then be able to retrieve them from the <code>&lt;use xlink:href="#myName"/&gt;</code> tag.
Try the snipped below.</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="0" height="0"&gt;
  &lt;defs&gt;
    &lt;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"/&gt;
&lt;/svg&gt;

  
  &lt;span class="icon red"&gt;
          &lt;svg viewbox="0 0 100 100"&gt;
            &lt;use xlink:href="#home"/&gt;
          &lt;/svg&gt;
        &lt;/span&gt;
  
    &lt;span class="icon blue"&gt;
          &lt;svg viewbox="0 0 100 100"&gt;
            &lt;use xlink:href="#home"/&gt;
          &lt;/svg&gt;
        &lt;/span&gt;</code></pre>
</div>
</div>
</p>

<p>Note that you can put any URL before the fragment <code>#</code> if you want to load the SVG from an <a href="https://css-tricks.com/svg-use-external-source/" rel="nofollow noreferrer">external source</a> (and not embed it into your HTML). Also, usually you do not specify the fill into the CSS. It's better to consider using <code>fill:"currentColor"</code> within the SVG itself. The corresponding element's CSS color value will then be used in place.</p>


blocks|key|2947288|text|因为SVG基本上是代码，所以您只需要内容。我使用PHP获取内容，但是您可以使用任何您想要的内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2947289|<?php
$content++++=+file_get_contents($pathToSVG);
?>|code-block|syntax|javascript|2947290|然后，我在div容器中“按原样”打印了内容|2947291|<div+class="fill-class"><?php+echo+$content;?></div>|2947292|在CSS上将规则最终设置为容器的SVG孩子|2947293|.fill-class+>+svg+{+
++++fill:+orange;
}|2947294|我用一个材质图标SVG得到了这个结果：|2947295|Mozilla+Firefox+59.0.2+(64位)+Linux|2947296|​|2947297|📷|atomic|offset|length|2947298|2947299|Google+Chrome66.0.3359.181+(内部版本)+(64位)+Linux|2947300|2947301|2947302|2947303|Opera+53.0.2907.37+Linux|2947304|2947305|2947306|2947307|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/0c8119efb00ba764c11252ca1d523097.jpeg|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/b3225f420d76cea9f0175efa35516000.jpeg|2|https://ask.qcloudimg.com/http-save/yehe-900000/7b430c785c5d2f41478df9a32680be32.jpeg^0|0|0|0|0|0|0|0|0|0|0|1|0|0|0|0|0|0|1|1|0|0|0|0|0|1|2|0|0^^$0|@$1|2|3|4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1P|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1Q|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1R|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|1S|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1T|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1U|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1V|8|@]|9|@]|A|$]]|$1|U|3|V|5|W|7|1W|8|@]|9|@$X|1X|Y|1Y|1|1Z]]|A|$]]|$1|Z|3|T|5|6|7|20|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|21|8|@]|9|@]|A|$]]|$1|12|3|T|5|6|7|22|8|@]|9|@]|A|$]]|$1|13|3|V|5|W|7|23|8|@]|9|@$X|24|Y|25|1|26]]|A|$]]|$1|14|3|T|5|6|7|27|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|28|8|@]|9|@]|A|$]]|$1|17|3|T|5|6|7|29|8|@]|9|@]|A|$]]|$1|18|3|V|5|W|7|2A|8|@]|9|@$X|2B|Y|2C|1|2D]]|A|$]]|$1|19|3|T|5|6|7|2E|8|@]|9|@]|A|$]]|$1|1A|3|-4|5|6|7|2F|8|@]|9|@]|A|$]]]|1B|$1C|$5|1D|1E|1F|A|$1G|1H|1I|-4]]|1J|$5|1D|1E|1F|A|$1G|1K|1I|-4]]|1L|$5|1D|1E|1F|A|$1G|1M|1I|-4]]]]

<p>Since SVG is basically code, you need just contents. I used PHP to obtain content, but you can use whatever you want.</p>

<pre><code>&lt;?php
$content    = file_get_contents($pathToSVG);
?&gt;
</code></pre>

<p>Then, I've printed content "as is" inside a div container</p>

<pre><code>&lt;div class="fill-class"&gt;&lt;?php echo $content;?&gt;&lt;/div&gt;
</code></pre>

<p>To finnaly set rule to container's SVG childs on CSS</p>

<pre><code>.fill-class &gt; svg { 
    fill: orange;
}
</code></pre>

<p>I got this results with a material icon SVG:</p>

<p>Mozilla Firefox 59.0.2 (64-bit) Linux</p>

<p><a href="https://i.stack.imgur.com/46V0s.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/46V0s.jpg" alt="enter image description here"></a></p>

<p>Google Chrome66.0.3359.181 (Build oficial) (64 bits) Linux</p>

<p><a href="https://i.stack.imgur.com/432FP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/432FP.jpg" alt="enter image description here"></a></p>

<p>Opera 53.0.2907.37 Linux</p>

<p><a href="https://i.stack.imgur.com/JUJAe.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JUJAe.jpg" alt="enter image description here"></a></p>


blocks|key|2947319|text|如果你想要一个动态的颜色，不想使用javascript，也不想要一个内联SVG，可以使用一个CSS变量。适用于Chrome，Firefox和Safari。编辑:和边|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2947320|<svg>
++++<use+href="logo.svg"+style="--color_fill:+#000;"></use>
</svg>|code-block|syntax|javascript|2947321|在您的SVG中，用style="fill:+var(--color_fill)"替换任何style="fill:+#000"实例。|offset|length|style|CODE|2947322|entityMap^0|0|0|9|V|18|I|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

<p>If you want a dynamic color, do not want to use javascript and do not want an inline SVG, use a CSS variable. Works in Chrome, Firefox and Safari. edit: and Edge</p>
<pre><code>&lt;svg&gt;
    &lt;use href=&quot;logo.svg&quot; style=&quot;--color_fill: #000;&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
<p>In your SVG, replace any instances of <code>style=&quot;fill: #000&quot;</code> with <code>style=&quot;fill: var(--color_fill)&quot;</code>.</p>


blocks|key|153883|text|尝试纯CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|153884|.logo-img+{
++//+to+black
++filter:+invert(1);
++//+or+to+blue
++//+filter:+invert(1)+sepia(1)+saturate(5)+hue-rotate(175deg);
}|code-block|syntax|javascript|153885|有关更多信息，请参阅本文https://blog.union.io/code/2017/08/10/img-svg-fill/|offset|length|153886|entityMap|0|LINK|mutability|MUTABLE|url|https://blog.union.io/code/2017/08/10/img-svg-fill/^0|0|0|C|1F|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Try pure CSS:</p>

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

<p>more info in this article <a href="https://blog.union.io/code/2017/08/10/img-svg-fill/" rel="noreferrer">https://blog.union.io/code/2017/08/10/img-svg-fill/</a></p>


blocks|key|149881|text|首先必须将SVG注入HTML+DOM。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|149882|有一个名为SVGInject的开源库可以为您完成此任务。它使用onload属性来触发注入。|offset|length|style|CODE|149883|下面是一个使用SVGInject的最小示例：|149884|<html>
++<head>
++++<script+src="svg-inject.min.js"></script>
++</head>
++<body>
++++<img+src="image.svg"+onload="SVGInject(this)"+/>
++</body>
</html>|code-block|syntax|javascript|149885|加载图像后，onload="SVGInject(this)将触发注入，<img>元素将被src属性中提供的SVG文件的内容替换。|149886|它解决了SVG注入的几个问题：|149887|可以隐藏|149888|SVG，直到注入完成。如果在加载时已经应用了样式，这一点很重要，否则将导致短暂的“未设置样式的内容闪烁”。|ordered-list-item|149889|+<img>元素自动注入自身。如果您动态添加SVG，则不必担心再次调用注入函数。|149890|在SVG中的每个ID中添加一个随机字符串，以避免在多次注入SVG时在文档中多次使用相同的ID。|149891|149892|SVGInject是纯Javascript，适用于所有支持SVG的浏览器。|149893|免责声明:我是SVGInject的共同作者|149894|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/iconfu/svg-inject^0|0|V|6|5|9|0|0|0|0|6|N|Z|5|18|3|0|0|0|0|1|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1F|8|@$D|1G|E|1H|F|G]]|9|@$D|1I|E|1J|1|1K]]|A|$]]|$1|H|3|I|5|6|7|1L|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1M|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1N|8|@$D|1O|E|1P|F|G]|$D|1Q|E|1R|F|G]|$D|1S|E|1T|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1U|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1V|8|@]|9|@]|A|$]]|$1|U|3|V|5|W|7|1W|8|@]|9|@]|A|$]]|$1|X|3|Y|5|W|7|1X|8|@$D|1Y|E|1Z|F|G]]|9|@]|A|$]]|$1|Z|3|10|5|W|7|20|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|21|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|22|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|23|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|24|8|@]|9|@]|A|$]]]|17|$18|$5|19|1A|1B|A|$1C|1D]]]]

<p>You will first have to inject the SVG into the HTML DOM. </p>

<p>There is an open source library called <a href="https://github.com/iconfu/svg-inject" rel="noreferrer">SVGInject</a> that does this for you. It uses the <code>onload</code> attribute to trigger the injection.</p>

<p>Here is a minimal example using SVGInject:</p>

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;script src="svg-inject.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;img src="image.svg" onload="SVGInject(this)" /&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>After the image is loaded the <code>onload="SVGInject(this)</code> will trigger the injection and the <code>&lt;img&gt;</code> element will be replaced by the contents of the SVG file provided in the <code>src</code> attribute.</p>

<p>It solves several issues with SVG injection:</p>

<ol>
<li><p>SVGs can be hidden until injection has finished. This is important if a style is already applied during load time, which would otherwise cause a brief "unstyled content flash".</p></li>
<li><p>The <code>&lt;img&gt;</code> elements inject themselves automatically. If you add SVGs dynamically, you don't have to worry about calling the injection function again.</p></li>
<li><p>A random string is added to each ID in the SVG to avoid having the same ID multiple times in the document if an SVG is injected more than once. </p></li>
</ol>

<p>SVGInject is plain Javascript and works with all browsers that support SVG.</p>

<p><em>Disclaimer: I am the co-author of SVGInject</em></p>


blocks|key|151194|text|我知道这是一个老问题，但最近我们遇到了同样的问题，我们从服务器端解决了它。这是一个php特有的答案，但我确信其他环境也有类似的答案。您从一开始就将svg呈现为svg，而不是使用img标记。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|151195|public+static+function+print_svg($file){
++++$iconfile+=+new+\DOMDocument();
++++$iconfile->load($file);
++++$tag+=+$iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
++++return+$tag;
}|code-block|syntax|javascript|151196|现在，当您呈现文件时，您将获得完整的内联svg|151197|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Know this is an old question but recently we came across the same issue, and we solved it from the server side. This is a php specific answer but I am positive that other envs have something similar.
instead of using the img tag you render the svg as svg from the get-go.</p>

<pre><code>public static function print_svg($file){
    $iconfile = new \DOMDocument();
    $iconfile-&gt;load($file);
    $tag = $iconfile-&gt;saveHTML($iconfile-&gt;getElementsByTagName('svg')[0]);
    return $tag;
}
</code></pre>

<p>now when you render the file you will get complete inline svg </p>


blocks|key|151199|text|如果您只是在真彩色和黑白之间切换图像，则可以将一个选择器设置为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|151200|{过滤器:无；}|151201|另一种是：|151202|{filter:grayscale(100%25);}|code-block|syntax|javascript|151203|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>If you are just switching the image between the real color and the black-and-white, you can set one selector as: </p>

<p>{filter:none;}</p>

<p>and another as:</p>

<pre><code>{filter:grayscale(100%);}
</code></pre>


blocks|key|2734804|text|对于将PHP与.svg图像结合使用的人来说，这可能会有所帮助。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2734805|您不能使用CSS覆盖img标记内的属性。但是，当svg源代码嵌入到HTML中时，您肯定可以做到。我喜欢用包含.svg.php文件的require_once函数来解决这个问题。这就像导入一张图片，但你仍然可以用CSS覆盖样式！|2734806|首先包含svg文件：|2734807|<?php+require_once(+'/assets/images/my-icon.svg.php'+);+?>|code-block|syntax|javascript|2734808|它包括这个图标，例如：|2734809|<svg+xmlns="http://www.w3.org/2000/svg"+width="20.666"+height="59.084"+viewBox="0+0+20.666+59.084"><g+transform="translate(-639.749+-3139)"><path+d="M648.536,3173.876c0-2.875-1.725-3.8-3.471-3.8-1.683,0-3.49.9-3.49,3.8,0,3,1.786,3.8,3.49,3.8C646.811,3177.676,648.536,3176.769,648.536,3173.876Zm-3.471,2.341c-.883,0-1.437-.513-1.437-2.341,0-1.971.615-2.381,1.437-2.381.862,0,1.438.349,1.438,2.381,0,1.907-.616,2.339-1.438,2.339Z"+fill="#142312"/><path+d="M653.471,3170.076a1.565,1.565,0,0,0-1.416.9l-6.558,13.888h1.2a1.565,1.565,0,0,0,1.416-.9l6.559-13.887Z"+fill="#142312"/><path+d="M655.107,3177.263c-1.684,0-3.471.9-3.471,3.8,0,3,1.766,3.8,3.471,3.8,1.745,0,3.49-.9,3.49-3.8C658.6,3178.186,656.851,3177.263,655.107,3177.263Zm0,6.139c-.884,0-1.438-.514-1.438-2.34,0-1.972.617-2.381,1.438-2.381.862,0,1.437.349,1.437,2.381,0,1.909-.616,2.34-1.437,2.34Z"+fill="#142312"/><path+d="M656.263,3159.023l-1.49-14.063a1.35,1.35,0,0,0,.329-.293,1.319,1.319,0,0,0,.268-1.123l-.753-3.49a1.328,1.328,0,0,0-1.306-1.054h-6.448a1.336,1.336,0,0,0-1.311,1.068l-.71,3.493a1.344,1.344,0,0,0,.276,1.112,1.532,1.532,0,0,0,.283.262l-1.489,14.087c-1.7,1.727-4.153,4.871-4.153,8.638v28.924a1.339,1.339,0,0,0,1.168,1.49,1.357,1.357,0,0,0,.17.01h17.981a1.366,1.366,0,0,0,1.337-1.366v-29.059C660.414,3163.893,657.963,3160.749,656.263,3159.023Zm-8.307-17.349h4.274l.176.815H647.79Zm9.785,43.634v10.1H642.434v-17.253a4.728,4.728,0,0,1-2.028-4.284,4.661,4.661,0,0,1,2.028-4.215v-2c0-3.162,2.581-5.986,3.687-7.059a1.356,1.356,0,0,0,.4-.819l1.542-14.614H652.1l1.545,14.618a1.362,1.362,0,0,0,.4.819c1.109,1.072,3.688,3.9,3.688,7.059v9.153a5.457,5.457,0,0,1,0,8.5Z"+fill="#142312"/></g></svg>|2734810|现在我们可以像这样用CSS轻松地更改填充颜色：|2734811|svg+path+{
++fill:+blue;
}|2734812|我首先尝试用file_get_contents()解决这个问题，但上面的解决方案要快得多。|2734813|entityMap^0|3|3|7|4|0|1I|8|1T|C|0|0|0|0|0|0|0|6|J|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1A|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1B|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1C|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1D|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|1E|8|@]|D|@]|E|$]]|$1|U|3|V|5|L|7|1F|8|@]|D|@]|E|$M|N]]|$1|W|3|X|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|Z|$]]

<p>This might be helpful for people using <code>PHP</code> in combination with <code>.svg</code> images that they want to manipulate with CSS.</p>

<p>You can't overwrite properties inside a img tag with CSS. But when the svg source code is embedded in the HTML you surely can. I like to resolve this issue with a <code>require_once</code> function where I include a <code>.svg.php</code> file. It's like importing an image but you can still overwrite styles with CSS!</p>

<p>First include the svg file:</p>

<pre><code>&lt;?php require_once( '/assets/images/my-icon.svg.php' ); ?&gt;
</code></pre>

<p>And it includes this icon for example: </p>

<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" width="20.666" height="59.084" viewBox="0 0 20.666 59.084"&gt;&lt;g transform="translate(-639.749 -3139)"&gt;&lt;path d="M648.536,3173.876c0-2.875-1.725-3.8-3.471-3.8-1.683,0-3.49.9-3.49,3.8,0,3,1.786,3.8,3.49,3.8C646.811,3177.676,648.536,3176.769,648.536,3173.876Zm-3.471,2.341c-.883,0-1.437-.513-1.437-2.341,0-1.971.615-2.381,1.437-2.381.862,0,1.438.349,1.438,2.381,0,1.907-.616,2.339-1.438,2.339Z" fill="#142312"/&gt;&lt;path d="M653.471,3170.076a1.565,1.565,0,0,0-1.416.9l-6.558,13.888h1.2a1.565,1.565,0,0,0,1.416-.9l6.559-13.887Z" fill="#142312"/&gt;&lt;path d="M655.107,3177.263c-1.684,0-3.471.9-3.471,3.8,0,3,1.766,3.8,3.471,3.8,1.745,0,3.49-.9,3.49-3.8C658.6,3178.186,656.851,3177.263,655.107,3177.263Zm0,6.139c-.884,0-1.438-.514-1.438-2.34,0-1.972.617-2.381,1.438-2.381.862,0,1.437.349,1.437,2.381,0,1.909-.616,2.34-1.437,2.34Z" fill="#142312"/&gt;&lt;path d="M656.263,3159.023l-1.49-14.063a1.35,1.35,0,0,0,.329-.293,1.319,1.319,0,0,0,.268-1.123l-.753-3.49a1.328,1.328,0,0,0-1.306-1.054h-6.448a1.336,1.336,0,0,0-1.311,1.068l-.71,3.493a1.344,1.344,0,0,0,.276,1.112,1.532,1.532,0,0,0,.283.262l-1.489,14.087c-1.7,1.727-4.153,4.871-4.153,8.638v28.924a1.339,1.339,0,0,0,1.168,1.49,1.357,1.357,0,0,0,.17.01h17.981a1.366,1.366,0,0,0,1.337-1.366v-29.059C660.414,3163.893,657.963,3160.749,656.263,3159.023Zm-8.307-17.349h4.274l.176.815H647.79Zm9.785,43.634v10.1H642.434v-17.253a4.728,4.728,0,0,1-2.028-4.284,4.661,4.661,0,0,1,2.028-4.215v-2c0-3.162,2.581-5.986,3.687-7.059a1.356,1.356,0,0,0,.4-.819l1.542-14.614H652.1l1.545,14.618a1.362,1.362,0,0,0,.4.819c1.109,1.072,3.688,3.9,3.688,7.059v9.153a5.457,5.457,0,0,1,0,8.5Z" fill="#142312"/&gt;&lt;/g&gt;&lt;/svg&gt;
</code></pre>

<p>Now we can easily change the fill color like this with CSS:</p>

<pre><code>svg path {
  fill: blue;
}
</code></pre>

<p>I first tried to solve this problem with <code>file_get_contents()</code> but the solution above is much faster.</p>


blocks|key|151215|text|简单..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|151216|您可以使用以下代码：|151217|<svg+class="logo">
++<use+xlink:href="../../static/icons/logo.svg#Capa_1"></use>
</svg>|code-block|syntax|javascript|151218|首先指定svg的路径，然后写下它的ID，在本例中是"Capa_1“。您可以在任意编辑器中打开svg，获取svg的ID。|151219|在css中：|151220|.logo+{
++fill:+red;
}|151221|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Simple..</p>

<p>You can use this code:</p>

<pre><code>&lt;svg class="logo"&gt;
  &lt;use xlink:href="../../static/icons/logo.svg#Capa_1"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>

<p>First specify the path of svg and then write it's ID, In this case "Capa_1". You can get the ID of svg by opening it in any editor.</p>

<p>In css: </p>

<pre><code>.logo {
  fill: red;
}
</code></pre>


blocks|key|149924|text|使用滤镜转换为任何颜色。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|149925|我最近找到了这个解决方案，并希望有人能够使用它。由于该解决方案使用了滤镜，因此它可以用于任何类型的图像。不仅仅是svg。|149926|如果您只想更改单色图像的颜色，则可以使用一些滤镜来实现此目的。当然，它也适用于多色图像，但你不能针对特定的颜色。只有整个图像。|149927|滤镜来自How+to+transform+black+into+any+given+color+using+only+CSS+filters中建议的脚本，如果您想要将白色更改为任何颜色，您可以调整每个滤镜中的反转值。|149928|​|149929|.startAsBlack{
++display:+inline-block;
++width:+50px;
++height:+50px;
++background:+black;
}

.black-green{
++filter:+invert(43%25)+sepia(96%25)+saturate(1237%25)+hue-rotate(88deg)+brightness(128%25)+contrast(119%25);
}

.black-red{
++filter:+invert(37%25)+sepia(93%25)+saturate(7471%25)+hue-rotate(356deg)+brightness(91%25)+contrast(135%25);
}

.black-blue{
++filter:+invert(12%25)+sepia(83%25)+saturate(5841%25)+hue-rotate(244deg)+brightness(87%25)+contrast(153%25);
}

.black-purple{
++filter:+invert(18%25)+sepia(98%25)+saturate(2657%25)+hue-rotate(289deg)+brightness(121%25)+contrast(140%25);
}|code-block|syntax|javascript|149930|Black+to+any+color:+<br/>
<div+class="startAsBlack+black-green"></div>
<div+class="startAsBlack+black-red"></div>
<div+class="startAsBlack+black-blue"></div>
<div+class="startAsBlack+black-purple"></div>|149931|149932|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/42966641/how-to-transform-black-into-any-given-color-using-only-css-filters/43960991#43960991^0|0|C|0|0|0|4|1U|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|17|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|18|8|@]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|L|3|M|5|6|7|1C|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1D|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|P|7|1E|8|@]|D|@]|E|$Q|R]]|$1|U|3|M|5|6|7|1F|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|W|$X|$5|Y|Z|10|E|$11|12]]]]

<p><strong>Use filters to transform to any color.</strong></p>

<p>I recently found this solution, and hope somebody might be able to use it.
Since the solution uses filters, it can be used with any type of image. Not just svg. </p>

<p>If you have a single-color image that you just want to change the color of, you can do this with the help of some filters. It works on multicolor images as well of course, but you can't target a specific color. Only the whole image. </p>

<p>The filters came from the script proposed in <a href="https://stackoverflow.com/questions/42966641/how-to-transform-black-into-any-given-color-using-only-css-filters/43960991#43960991">How to transform black into any given color using only CSS filters</a>
If you want to change white to any color, you can adjust the invert value in each filter.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.startAsBlack{
  display: inline-block;
  width: 50px;
  height: 50px;
  background: black;
}

.black-green{
  filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(128%) contrast(119%);
}

.black-red{
  filter: invert(37%) sepia(93%) saturate(7471%) hue-rotate(356deg) brightness(91%) contrast(135%);
}

.black-blue{
  filter: invert(12%) sepia(83%) saturate(5841%) hue-rotate(244deg) brightness(87%) contrast(153%);
}

.black-purple{
  filter: invert(18%) sepia(98%) saturate(2657%) hue-rotate(289deg) brightness(121%) contrast(140%);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>Black to any color: &lt;br/&gt;
&lt;div class="startAsBlack black-green"&gt;&lt;/div&gt;
&lt;div class="startAsBlack black-red"&gt;&lt;/div&gt;
&lt;div class="startAsBlack black-blue"&gt;&lt;/div&gt;
&lt;div class="startAsBlack black-purple"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2734863|text|在代码编辑器中打开svg图标，并在path标记后添加一个类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2734864|<path+class'colorToChange'+...|code-block|syntax|javascript|2734865|您可以向svg添加类并更改颜色，如下所示：|2734866|codepen|offset|length|2734867|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/hmzajmal/pen/ZEGvWYa^0|0|0|0|0|7|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>open the svg icon in your code editor and add a class after the path tag:</p>

<pre><code>&lt;path class'colorToChange' ...
</code></pre>

<p>You can add class to svg and change the color like this:</p>

<p><a href="https://codepen.io/hmzajmal/pen/ZEGvWYa" rel="nofollow noreferrer">codepen</a></p>


blocks|key|154008|text|编辑您的SVG文件，将fill="currentColor"添加到svg标签，并确保从文件中删除任何其他填充属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|154009|例如：|154010|<svg+xmlns="http://www.w3.org/2000/svg"+viewBox="0+0+200+139.435269383854"+id="img"+fill="currentColor">...
</svg>|code-block|syntax|javascript|154011|请注意，currentColor是一个关键字(而不是使用中的固定颜色)。|154012|之后，您可以使用CSS更改颜色，方法是设置元素的color属性或从元素的父元素更改颜色。|154013|示例：|154014|.div-with-svg-inside+{
++++color:+red;
}|154015|我忘了说，您必须这样插入SVG：|154016|++++++<svg>
++++++++<use+xlink:href='/assets/file.svg#img'></use>
++++++</svg>|154017|请注意，#img是svg文件中svg标记的id。|154018|另一种方式：https://css-tricks.com/cascading-svg-fill-color/|154019|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/cascading-svg-fill-color/^0|B|J|0|0|0|4|C|0|O|5|0|0|0|0|0|4|4|F|3|0|6|1C|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1D|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1I|8|@$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1L|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1M|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|1N|8|@]|D|@]|E|$]]|$1|W|3|X|5|J|7|1O|8|@]|D|@]|E|$K|L]]|$1|Y|3|Z|5|6|7|1P|8|@$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]]|D|@]|E|$]]|$1|10|3|11|5|6|7|1U|8|@]|D|@$9|1V|A|1W|1|1X]]|E|$]]|$1|12|3|-4|5|6|7|1Y|8|@]|D|@]|E|$]]]|13|$14|$5|15|16|17|E|$18|19]]]]

<p>Edit your SVG file, add <code>fill=&quot;currentColor&quot;</code> to svg tag and make sure to remove any other fill property from the file.</p>
<p>For example:</p>
<pre><code>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 200 139.435269383854&quot; id=&quot;img&quot; fill=&quot;currentColor&quot;&gt;...
&lt;/svg&gt;
</code></pre>
<p>Note that <code>currentColor</code> is a keyword (not a fixed color in use).</p>
<p>After that, you can change the color using CSS, by setting the <code>color</code> property of the element or from it's parent.</p>
<p>Example:</p>
<pre><code>.div-with-svg-inside {
    color: red;
}
</code></pre>
<p>I forgot to say, you must insert the SVG this way:</p>
<pre><code>      &lt;svg&gt;
        &lt;use xlink:href='/assets/file.svg#img'&gt;&lt;/use&gt;
      &lt;/svg&gt;

</code></pre>
<p>Note that <code>#img</code> is the id of the <code>svg</code> tag inside svg file.</p>
<p>Another way of doing it: <a href="https://css-tricks.com/cascading-svg-fill-color/" rel="noreferrer">https://css-tricks.com/cascading-svg-fill-color/</a></p>


blocks|key|154021|text|直接到svg填充css将不起作用你可以使用下面的方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|154022|<style>
svg+path+{
++++fill:+red;
}
</style>
<svg+xmlns="http://www.w3.org/2000/svg"+width="20.666"+height="59.084"+viewBox="0+0+20.666+59.084"><g+transform="translate(-639.749+-3139)"><path+d="M648.536,3173.876c0-2.875-1.725-3.8-3.471-3.8-1.683,0-3.49.9-3.49,3.8,0,3,1.786,3.8,3.49,3.8C646.811,3177.676,648.536,3176.769,648.536,3173.876Zm-3.471,2.341c-.883,0-1.437-.513-1.437-2.341,0-1.971.615-2.381,1.437-2.381.862,0,1.438.349,1.438,2.381,0,1.907-.616,2.339-1.438,2.339Z"+fill="#142312"/><path+d="M653.471,3170.076a1.565,1.565,0,0,0-1.416.9l-6.558,13.888h1.2a1.565,1.565,0,0,0,1.416-.9l6.559-13.887Z"+fill="#142312"/><path+d="M655.107,3177.263c-1.684,0-3.471.9-3.471,3.8,0,3,1.766,3.8,3.471,3.8,1.745,0,3.49-.9,3.49-3.8C658.6,3178.186,656.851,3177.263,655.107,3177.263Zm0,6.139c-.884,0-1.438-.514-1.438-2.34,0-1.972.617-2.381,1.438-2.381.862,0,1.437.349,1.437,2.381,0,1.909-.616,2.34-1.437,2.34Z"+fill="#142312"/><path+d="M656.263,3159.023l-1.49-14.063a1.35,1.35,0,0,0,.329-.293,1.319,1.319,0,0,0,.268-1.123l-.753-3.49a1.328,1.328,0,0,0-1.306-1.054h-6.448a1.336,1.336,0,0,0-1.311,1.068l-.71,3.493a1.344,1.344,0,0,0,.276,1.112,1.532,1.532,0,0,0,.283.262l-1.489,14.087c-1.7,1.727-4.153,4.871-4.153,8.638v28.924a1.339,1.339,0,0,0,1.168,1.49,1.357,1.357,0,0,0,.17.01h17.981a1.366,1.366,0,0,0,1.337-1.366v-29.059C660.414,3163.893,657.963,3160.749,656.263,3159.023Zm-8.307-17.349h4.274l.176.815H647.79Zm9.785,43.634v10.1H642.434v-17.253a4.728,4.728,0,0,1-2.028-4.284,4.661,4.661,0,0,1,2.028-4.215v-2c0-3.162,2.581-5.986,3.687-7.059a1.356,1.356,0,0,0,.4-.819l1.542-14.614H652.1l1.545,14.618a1.362,1.362,0,0,0,.4.819c1.109,1.072,3.688,3.9,3.688,7.059v9.153a5.457,5.457,0,0,1,0,8.5Z"+fill="#142312"/></g></svg>|code-block|syntax|javascript|154023|这对我很有效|154024|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Directly to svg fill css will not work you can use as below</p>
<pre><code>&lt;style&gt;
svg path {
    fill: red;
}
&lt;/style&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;20.666&quot; height=&quot;59.084&quot; viewBox=&quot;0 0 20.666 59.084&quot;&gt;&lt;g transform=&quot;translate(-639.749 -3139)&quot;&gt;&lt;path d=&quot;M648.536,3173.876c0-2.875-1.725-3.8-3.471-3.8-1.683,0-3.49.9-3.49,3.8,0,3,1.786,3.8,3.49,3.8C646.811,3177.676,648.536,3176.769,648.536,3173.876Zm-3.471,2.341c-.883,0-1.437-.513-1.437-2.341,0-1.971.615-2.381,1.437-2.381.862,0,1.438.349,1.438,2.381,0,1.907-.616,2.339-1.438,2.339Z&quot; fill=&quot;#142312&quot;/&gt;&lt;path d=&quot;M653.471,3170.076a1.565,1.565,0,0,0-1.416.9l-6.558,13.888h1.2a1.565,1.565,0,0,0,1.416-.9l6.559-13.887Z&quot; fill=&quot;#142312&quot;/&gt;&lt;path d=&quot;M655.107,3177.263c-1.684,0-3.471.9-3.471,3.8,0,3,1.766,3.8,3.471,3.8,1.745,0,3.49-.9,3.49-3.8C658.6,3178.186,656.851,3177.263,655.107,3177.263Zm0,6.139c-.884,0-1.438-.514-1.438-2.34,0-1.972.617-2.381,1.438-2.381.862,0,1.437.349,1.437,2.381,0,1.909-.616,2.34-1.437,2.34Z&quot; fill=&quot;#142312&quot;/&gt;&lt;path d=&quot;M656.263,3159.023l-1.49-14.063a1.35,1.35,0,0,0,.329-.293,1.319,1.319,0,0,0,.268-1.123l-.753-3.49a1.328,1.328,0,0,0-1.306-1.054h-6.448a1.336,1.336,0,0,0-1.311,1.068l-.71,3.493a1.344,1.344,0,0,0,.276,1.112,1.532,1.532,0,0,0,.283.262l-1.489,14.087c-1.7,1.727-4.153,4.871-4.153,8.638v28.924a1.339,1.339,0,0,0,1.168,1.49,1.357,1.357,0,0,0,.17.01h17.981a1.366,1.366,0,0,0,1.337-1.366v-29.059C660.414,3163.893,657.963,3160.749,656.263,3159.023Zm-8.307-17.349h4.274l.176.815H647.79Zm9.785,43.634v10.1H642.434v-17.253a4.728,4.728,0,0,1-2.028-4.284,4.661,4.661,0,0,1,2.028-4.215v-2c0-3.162,2.581-5.986,3.687-7.059a1.356,1.356,0,0,0,.4-.819l1.542-14.614H652.1l1.545,14.618a1.362,1.362,0,0,0,.4.819c1.109,1.072,3.688,3.9,3.688,7.059v9.153a5.457,5.457,0,0,1,0,8.5Z&quot; fill=&quot;#142312&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;
</code></pre>
<p>This worked for me</p>


blocks|key|152679|text|对我来说，当我的svg作为img和svg时，它们看起来不同。因此，我的解决方案是将img转换为csv，在内部更改样式，然后再转换回img+(尽管这需要更多的工作)，我相信"blob“也比使用"mask”的被支持的答案具有更好的兼容性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|152680|++let+img+=+yourimgs[0];
++if+(img.src.includes(".svg"))+{
++++var+ajax+=+new+XMLHttpRequest();
++++ajax.open("GET",+img.src,+true);
++++ajax.send();
++++ajax.onload+=+function+(e)+{
+++++
++++++svg+=+e.target.responseText;

+++++
++++++svgText+=+"";
++++++//change+your+svg-string+as+youd+like,+for+example
++++++//+replacing+the+hex+color+between+"{fill:"+and+";"
++++++idx+=+svg.indexOf("{fill:");
++++++substr+=+svg.substr(idx+%2B+6);
++++++str1+=+svg.substr(0,+idx+%2B+6);
++++++str2+=+substr.substr(substr.indexOf(";"));
++++++svgText+=+str1+%2B+"#ff0000"+%2B+str2;
++++++

++++++let+blob+=+new+Blob([svgText],+{+type:+"image/svg%2Bxml"+});
++++++let+url+=+URL.createObjectURL(blob);
++++++let+image+=+document.createElement("img");
++++++image.src+=+url;
++++++image.addEventListener("load",+()+=>+URL.revokeObjectURL(url),+{
++++++++once:+true,
++++++});
++++++img.replaceWith(image);
++++};
++}|code-block|syntax|javascript|152681|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>For me, my svgs looked different when having them as img and svg. So my solution converts the img to csv, changes styles internally and back to img (although it requires a bit more work), I believe &quot;blob&quot; also has better compatibility than the upvoted answer using &quot;mask&quot;.</p>
<pre><code>  let img = yourimgs[0];
  if (img.src.includes(&quot;.svg&quot;)) {
    var ajax = new XMLHttpRequest();
    ajax.open(&quot;GET&quot;, img.src, true);
    ajax.send();
    ajax.onload = function (e) {
     
      svg = e.target.responseText;

     
      svgText = &quot;&quot;;
      //change your svg-string as youd like, for example
      // replacing the hex color between &quot;{fill:&quot; and &quot;;&quot;
      idx = svg.indexOf(&quot;{fill:&quot;);
      substr = svg.substr(idx + 6);
      str1 = svg.substr(0, idx + 6);
      str2 = substr.substr(substr.indexOf(&quot;;&quot;));
      svgText = str1 + &quot;#ff0000&quot; + str2;
      

      let blob = new Blob([svgText], { type: &quot;image/svg+xml&quot; });
      let url = URL.createObjectURL(blob);
      let image = document.createElement(&quot;img&quot;);
      image.src = url;
      image.addEventListener(&quot;load&quot;, () =&gt; URL.revokeObjectURL(url), {
        once: true,
      });
      img.replaceWith(image);
    };
  }
</code></pre>


blocks|key|2947731|text|我建议选择你的颜色，然后到这支笔https://codepen.io/sosuke/pen/Pjoqqp它会转换十六进制到css滤镜例如：#64D7D6|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2947732|相等|2947733|filter:+invert(88%25)+sepia(21%25)+saturate(935%25)+hue-rotate(123deg)+brightness(85%25)+contrast(97%25);|code-block|syntax|javascript|2947734|最终的代码片段|BOLD|2947735|​|2947736|.filterit{
width:270px;
filter:+invert(88%25)+sepia(21%25)+saturate(935%25)+hue-rotate(123deg)+brightness(85%25)+contrast(97%25);
}|2947737|<img+src="https://www.flaticon.com/svg/static/icons/svg/1389/1389029.svg"
class="filterit

/>|2947738|2947739|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/sosuke/pen/Pjoqqp^0|1X|7|G|10|0|0|0|0|0|7|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@$9|17|A|18|1|19]]|E|$]]|$1|F|3|G|5|6|7|1A|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1C|8|@$9|1D|A|1E|B|O]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1F|8|@]|D|@]|E|$]]|$1|R|3|S|5|J|7|1G|8|@]|D|@]|E|$K|L]]|$1|T|3|U|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|V|3|Q|5|6|7|1I|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]]]

<p>I suggest to select your color , and go to this pen
<a href="https://codepen.io/sosuke/pen/Pjoqqp" rel="noreferrer">https://codepen.io/sosuke/pen/Pjoqqp</a>
it will convert HEX to css filter eg:<code>#64D7D6</code></p>
<p>equal</p>
<pre><code>filter: invert(88%) sepia(21%) saturate(935%) hue-rotate(123deg) brightness(85%) contrast(97%);
</code></pre>
<p><strong>the final snippet</strong></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.filterit{
width:270px;
filter: invert(88%) sepia(21%) saturate(935%) hue-rotate(123deg) brightness(85%) contrast(97%);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="https://www.flaticon.com/svg/static/icons/svg/1389/1389029.svg"
class="filterit

/&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2735034|text|为什么不直接使用CSS的filter属性来操作:hover或其他任何状态的颜色呢？我发现它可以将SVG图像转换成img标签。至少，它在2020年几乎完全得到支持。在我看来，这是最简单的解决方案。唯一需要注意的是，为了找到目标颜色，必须调整滤镜属性。但是你也有这个非常有用的tool。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2735035|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/sosuke/pen/Pjoqqp^0|C|6|N|6|1K|3|3S|4|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]]|E|$]]|$1|F|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>Why not just using CSS's <code>filter</code> property to manipulate the color on <code>:hover</code> or whatever other state? I found it works over SVG images into <code>img</code> tags. At least, it's almost fully supported in 2020. It seams to me the simpliest solution. The only caveat is having to tweak the filter properties in order to find the target color. But you have also this very useful <a href="https://codepen.io/sosuke/pen/Pjoqqp" rel="nofollow noreferrer">tool</a>.</p>


blocks|key|2947837|text|为此，您必须将SVG用作内联HTML。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2947838|假设这是您的logo.svg代码(当您在textEditor上打开它时)：|2947839|Logo.SVG|offset|length|style|BOLD|2947840|<svg+width="139"+height="100"+xmlns="http://www.w3.org/2000/svg">
++++
++++<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>|code-block|syntax|javascript|2947841|添加你想要的Class/ID+(我已经添加了'logo-img')：|2947842|编辑的Svg|2947843|<svg+class="logo-img"+width="139"+height="100"+xmlns="http://www.w3.org/2000/svg">
++++
++++...
</svg>|2947844|现在应用您的Css规则：|2947845|CSS|2947846|.logo-img+path+{
+++fill:+#000;
}|2947847|专业版|2947848|2947849|通过这种方式，您可以对用户的操作(悬停、选定等)进行动画处理|unordered-list-item|2947850|2947851|Con|2947852|2947853|你的超文本标记语言文件会变得一团糟。|2947854|2947855|此处是一个堆栈代码片段|2947856|​|2947857|<style>
++++++++body+{
++++++++++++display:+flex;
++++++++++++justify-content:+center;
++++++++}
++++++++.logo-img+path+{
++++++++++++transition:+.5s+all+linear;
++++++++}
++++++++.logo-img+path+{
++++++++++++fill:+coral;
++++++++}
++++++++.logo-img:hover+path{
++++++++++++fill:+darkblue;
++++++++}
++++++++
++++</style>|2947858|<!DOCTYPE+html>
<html+lang="en">

<head>
++++<meta+charset="UTF-8">
++++<meta+name="viewport"+content="width=device-width,+initial-scale=1.0">
++++<title>Document</title>
++++
</head>

<body>
++++<svg+class="logo-img"+width="139"+height="100"+xmlns="http://www.w3.org/2000/svg">
++++++++
++++++++<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>
</body>

</html>|2947859|2947860|entityMap^0|0|0|0|8|0|0|0|0|6|0|0|0|0|3|0|0|0|3|0|0|0|0|0|3|0|0|0|0|0|B|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1Q|8|@$F|1R|G|1S|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|1T|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1U|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1V|8|@$F|1W|G|1X|H|I]]|9|@]|A|$]]|$1|S|3|T|5|L|7|1Y|8|@]|9|@]|A|$M|N]]|$1|U|3|V|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|20|8|@$F|21|G|22|H|I]]|9|@]|A|$]]|$1|Y|3|Z|5|L|7|23|8|@]|9|@]|A|$M|N]]|$1|10|3|11|5|6|7|24|8|@$F|25|G|26|H|I]]|9|@]|A|$]]|$1|12|3|-4|5|6|7|27|8|@]|9|@]|A|$]]|$1|13|3|14|5|15|7|28|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|29|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|2A|8|@$F|2B|G|2C|H|I]]|9|@]|A|$]]|$1|19|3|-4|5|6|7|2D|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|15|7|2E|8|@]|9|@]|A|$]]|$1|1C|3|-4|5|6|7|2F|8|@]|9|@]|A|$]]|$1|1D|3|1E|5|6|7|2G|8|@$F|2H|G|2I|H|I]]|9|@]|A|$]]|$1|1F|3|1G|5|6|7|2J|8|@]|9|@]|A|$]]|$1|1H|3|1I|5|L|7|2K|8|@]|9|@]|A|$M|N]]|$1|1J|3|1K|5|L|7|2L|8|@]|9|@]|A|$M|N]]|$1|1L|3|1G|5|6|7|2M|8|@]|9|@]|A|$]]|$1|1M|3|-4|5|6|7|2N|8|@]|9|@]|A|$]]]|1N|$]]

<p>for that matters you have to use your SVG as an inline HTML.</p>
<p>say here's your logo.svg code (when you open it on textEditor):</p>
<p><strong>Logo.SVG</strong></p>
<pre><code>&lt;svg width=&quot;139&quot; height=&quot;100&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
    &lt;!-- Note that I've Added Class Attribute 'logo-img' Here --&gt;
    &lt;g transform=&quot;translate(-22 -45)&quot; fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;&gt;
        &lt;path
            d=&quot;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&quot;
            fill=&quot;#00000&quot; /&gt;
    &lt;/g&gt;
&lt;/svg&gt;
</code></pre>
<p>add your desired Class/ID to it (i've added 'logo-img'):</p>
<p><strong>Edited Svg</strong></p>
<pre><code>&lt;svg class=&quot;logo-img&quot; width=&quot;139&quot; height=&quot;100&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
    &lt;!-- Note that I've Added Class Attribute 'logo-img' Here --&gt;
    ...
&lt;/svg&gt;
</code></pre>
<p>Now apply Your Css Rules:</p>
<p><strong>CSS</strong></p>
<pre><code>.logo-img path {
   fill: #000;
}
</code></pre>
<p><strong>Pro</strong></p>
<ul>
<li>With this way you can animate on user's actions (hover, selected,...)</li>
</ul>
<p><strong>Con</strong></p>
<ul>
<li>Your HTML File would be a mess.</li>
</ul>
<p><strong>Heres a Stack Snippet</strong></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;
        body {
            display: flex;
            justify-content: center;
        }
        .logo-img path {
            transition: .5s all linear;
        }
        .logo-img path {
            fill: coral;
        }
        .logo-img:hover path{
            fill: darkblue;
        }
        
    &lt;/style&gt;</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    
&lt;/head&gt;

&lt;body&gt;
    &lt;svg class="logo-img" width="139" height="100" xmlns="http://www.w3.org/2000/svg"&gt;
        &lt;!-- Note that I've Added Class Attribute 'logo-img' Here --&gt;
        &lt;g transform="translate(-22 -45)" fill="none" fill-rule="evenodd"&gt;
            &lt;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" /&gt;
        &lt;/g&gt;
    &lt;/svg&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|154146|text|如果您的形状始终是一种纯色，并且有多种颜色，您可以使用SVG+，并使用一系列您自己的自定义SVG形状来制作自定义图标字体。然后，您可以设置/动画的大小和颜色的所有与CSS单独。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|154147|对于这个问题的所有可能用例，这是一个需要考虑的基本范式。我已经在很多项目中使用过它。无论如何，如果你没有听说过Fontello，你需要了解它。如果您知道有更好的类似解决方案，我很想知道。|154148|可能出现的问题：|154149|众所周知，|154150|图标/形状字体会干扰屏幕阅读器，因此可能需要进行一些处理。|ordered-list-item|154151|154152|154153|Fontello在导入形状方面可能很挑剔，在创作和导出它们时可能需要一些尝试和错误。避免任何和所有分组，只使用单个非嵌套的复合形状。|154154|154155|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|V|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|W|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|X|8|@]|9|@]|A|$]]|$1|M|3|N|5|J|7|Y|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|Q|$]]

<p>If your shape(s) are always one solid color and you have more than a couple, you can use <strong>Fontello</strong> and make a custom icon font with a whole series of your own custom SVG shapes. Then you can set/animate the size and color of all of them with CSS alone.</p>
<p>For all the possible use cases for this question, this is an essential paradigm to consider. I've used it in <em>many</em> projects. In any case, if you haven't heard of Fontello, you need to find out about it. If you know of a similar solution that is better, I would love to know.</p>
<p>Possible downfalls:</p>
<ol>
<li><p>Icon/shape fonts are known to mess with screen readers, so that may take some handling.</p>
</li>
<li><p>Fontello can be finicky with importing shapes, and it may take some trial and error with authoring and exporting them.
Avoid any and all grouping, and use <em>only</em> single non-nested compound shapes.</p>
</li>
</ol>


<p><strong>html</strong></p>

<pre><code>&lt;img src="logo.svg" alt="Logo" class="logo-img"&gt;
</code></pre>

<p><strong>css</strong></p>

<pre><code>.logo-img path {
  fill: #000;
}
</code></pre>

<p>The above svg loads and is natively <code>fill: #fff</code> but when I use the above <code>css</code> to try change it to black it doesn't change, this is my first time playing with SVG and I am not sure why it's not working.</p>


img src SVG changing the styles with CSS

服务器

容器

Linux

html<img src="logo.svg" alt="Logo" class="logo-img">css.logo-img path {  fill: #000;}上面的svg加载并且是原生的fill: #fff，但是当我使用上面的css将它改成黑色时，它没有改变，这是我第一次玩SVG，我不确定为什么它不能工作。

问img src SVG使用CSS更改样式
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问img src SVG使用CSS更改样式EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问img src SVG使用CSS更改样式
EN