我想使用這種技術并改變SVG的顏色，但是到目前為止我還沒有做到。我在CSS中使用這個，但是我的圖像總是黑色的，不管怎樣。

我的代碼:

.change-my-color {
  fill: green;
}

<svg>
    <image class="change-my-color" xlink: width="96" height="96" src="ppngfallback.png" />
</svg>

2020回答

CSS過濾器適用于當前所有的瀏覽器

要更改任何SVGs顏色 使用& ltimg & gt標簽。

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

要過濾到特定顏色，請使用以下代碼筆(單擊此處打開代碼筆)將十六進制顏色代碼轉換為CSS過濾器:

例如，#00EE00的輸出為

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

將CSS過濾器添加到這個類中。

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

要更改任何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 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。

根據Daniel的評論，我們可以直接使用fill屬性，而不是style屬性中的fill元素。

如果您想要動態更改顏色:

在代碼編輯器中打開SVG

添加或重寫每個路徑的fill屬性以填充= & quot當前顏色& quot

現在，svg將獲取你字體顏色，所以你可以這樣做:

svg {
    color : "red";
}

你不能這樣改變圖像的顏色。如果將SVG作為圖像加載，則不能使用CSS或JavaScript更改它在瀏覽器中的顯示方式。

如果您想改變您的SVG圖像，您必須使用& ltobject & gt，& ltiframe & gt或者使用& ltsvg & gt內嵌。

如果您想使用頁面中的技術，您需要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。你不能對圖像這樣做...作為路徑，你可以改變筆畫和填充信息，你就完成了。比如Adobe Illustrator

因此，通過CSS，您可以覆蓋路徑填充值:

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>

然后，您可以從CSS內容中控制筆畫和填充的顏色:

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

利弊:

簡單，并使用傳統的支持CSS。 適用于以下情況:

你控制SVG SVG可以內嵌在HTML中。 解決方案2 - CSS遮罩屬性

<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;
  }

}

利弊

相對容易使用 瀏覽器對mask CSS屬性的支持是部分的。 適用于以下情況:

SVG是外部的，通過URL包含 旨在用于現代已知的瀏覽器。 解決方案3 - CSS濾鏡屬性-靜態顏色 如果事先知道顏色，可以使用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%);
}

如果您的原始顏色不是黑色，請在濾鏡列表前面加上亮度(0)飽和(100%)以首先將其轉換為黑色。

利弊:

結果和所需的顏色之間可能會有微小的差異。 適用于以下情況:

期望的顏色是預先知道的。 外部圖像 我通過過濾器設置添加了一個測試頁面到彩色SVG:

舉個例子，

濾鏡:反轉(0.5)棕褐色(1)飽和(5)色調-旋轉(175度)

上傳& amp給你的SVG - Jsfiddle上色

我的想法來自:在圖像標簽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>

最簡單的方法是使用https://icomoon.io/app/#/select之類的服務從SVG中創建一個字體。上傳您的SVG，點擊& quot生成字體& quot，包括字體文件和CSS內容到你的身邊，只是使用和樣式像任何其他文本。我總是像這樣使用它，因為它使造型更容易。

但正如@CodeMouse92評論的文章中提到的，圖標字體搞亂了屏幕閱讀器(也可能對SEO不利)。所以還是堅持SVG吧。

你可以試著用這個css濾鏡給它上色:

.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);
}

要簡單地改變SVG文件的顏色:

轉到SVG文件，在樣式下，提及填充顏色:

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

要改變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>

以“svg”標記內的路徑為目標:

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

您可以內聯完成，例如:

<path fill="#ccc">

或者

svg{
   path{
        fill: #ccc

如果你使用一些技巧，你可以用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背景圖像的元素實現了這一功能，其工作方式與此非常相似。

但是無論如何，你必須修改這個腳本來適應你的情況。

方法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 />

給出一個樣式屬性并用顏色填充它。

另一途徑

用顏色填充你的形狀。這里我有矩形填充= & quot白色& quot。

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

這個(7行)本地Web組件(JSWC)加載外部內容，并將其注入DOM。

在一篇DEV博客文章中對此進行了解釋和記錄:& lt加載文件& gtWeb組件。

完整源代碼:

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="http://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>

如果同一個SVG必須用不同的顏色多次使用，那么在作為主副本的隱藏SVG中定義一組路徑。然后放置引用主路徑的新實例及其單獨的填充。

注意:這種方法只適用于inline & ltsvg & gt標簽。它不能與& ltimg & gt標簽加載。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>

這里是速度與激情的方式:)

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>

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

看看這段代碼。它工作了。

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

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

svg {
   fill: white;
}

我發現它有點笨拙，但這絕對是動態改變SVG顏色的有效方法。img & gt標簽。

在SVG文件中，您可以通過以下方式添加CSS內容:

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

在這里，您可以使用@media規則，通過它SVG可以在自身之外尋找上下文環境。有一個適用于SVG框的寬高比媒體特性(例如& ltimg & gt標簽)。您可以通過稍微拉伸SVG框來為SVG創建不同的上下文。

這樣，你也可以讓favicon和網站上出現的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必須包含視圖框信息，以便拉伸不會影響圖形。示例:

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

為了更好地解決Manish Menaria的(非常感謝你的幫助)響應，使用這個過濾器生成器，而不是一個有目的的生成器:https://angel-rs.github.io/css-color-filter-generator/

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

如果您想要對內聯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");

Manish Menaria的回答有一些問題，如果我們轉換白色，它顯示灰色。

所以我添加了一些調整，下面的例子具體顯示了如何改變材料圖標的顏色:

<mat-icon class="draft-white" svgIcon="draft" aria-hidden="false"></mat-icon>

.draft-white{
    filter: brightness(0) invert(1);
}

我的答案是這樣的。但是我不能100%確定它是否對每個人都有效:

選擇“svg”，然后選擇“path”。然后您可以更改“填充”。

.eye-icon-container {
    width: 33px;
    height: 33px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;

    :hover {
      background-color: #ddf0ff;
    }
    :active {
      background-color: #1d398d;
      svg {
        path {
          fill: #fff;
        }
      }
    }
  }

您可以使用字體圖標來使用SVG中的任何CSS選項

我在尋找一種擁有任何CSS選項的方法，比如SVG的動畫，我最終用我的SVG生成了一個字體圖標，然后在一個span中使用它(比如Font Awesome)，所以任何CSS選項，比如顏色，都可以在上面使用。

我使用https://icomoon.io將我的SVG圖像轉換為字體圖標。然后你可以像在HTML元素中使用字體Awesome或MaterialIcon一樣使用它。

使用svg & lt面具& gt元素。

這優于其他解決方案，因為:

與您的原始代碼非常匹配。 在IE工作！ 嵌入的圖像仍然可以是未修改的外部文件。 圖像甚至不必是SVG。 顏色是從字體顏色繼承來的，所以很容易和文本一起使用。 顏色是正常的CSS顏色，不是奇怪的濾鏡組合。

<svg style="color: green; width: 96px; height: 96px" viewBox="0 0 100 100" preserveAspectRatio="none">
  <defs>
    <mask id="fillMask" x="0" y="0" width="100" height="100">
      <image xlink: x="0" y="0" width="100" height="100" src="ppngfallback.png" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" style="stroke: none; fill: currentColor" mask="url(&quot;#fillMask&quot;)" />
</svg>

實際上，這個問題有一個更加靈活的解決方案:編寫一個Web組件，在運行時將SVG作為文本修補。我還在gist中發布了一個JSFiddle的鏈接。

濾鏡:反轉(42%)棕褐色(93%)飽和(1352%)色調旋轉(87度)亮度(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>

如果您有一個不透明度不同的單色SVG，您只是想著色為不同的顏色，那么有另一種方法可以使用:feFlood SVG濾鏡。

然而，這種解決方案不像單行CSS那樣簡單:

它作用于img元素內部的SVG。 這根本不需要編輯源SVG。 它允許你簡單地為SVG選擇一個目標顏色，而不用擔心復雜的顏色變換，比如色調旋轉。 這里有一個例子:

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <defs>
    <filter id="recolourFilter" filterUnits="userSpaceOnUse">
      <feFlood flood-color="aquamarine" result="flood" />
      <feComposite in="flood" in2="SourceAlpha" operator="in" />
    </filter>
  </defs>
</svg>

<img style="filter: url(#recolourFilter);" width="300" src="https://upload.wikimedia.org/wikipedia/commons/6/6b/Bitmap_VS_SVG.svg" />

這花了我一段時間來鍛煉，你不能改變一個導入的svg的顏色(很容易)，我如何設法在我的react應用程序中保持主題/顏色的createStyles是這樣的:

<MURadio
  icon={
    <svg
      width="24px"
      height="24px"
      viewBox="0 0 24 24"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      style={{
        fillRule: "evenodd",
        clipRule: "evenodd",
        strokeLinejoin: "round",
        strokeMiterlimit: "2",
      }}
    >
      <g transform="matrix(1,0,0,1,-511.714,-525.038)">
        <g transform="matrix(1.04348,0,0,1.04348,511.192,523.902)">
          <circle cx="12" cy="12.589" r="11.5" style={{ fill: "white" }} />
          <path
            d="M12,1.089C18.347,1.089 23.5,6.242 23.5,12.589C23.5,18.936 18.347,24.089 12,24.089C5.653,24.089 0.5,18.936 0.5,12.589C0.5,6.242 5.653,1.089 12,1.089ZM12,2.089C6.205,2.089 1.5,6.794 1.5,12.589C1.5,18.384 6.205,23.089 12,23.089C17.795,23.089 22.5,18.384 22.5,12.589C22.5,6.794 17.795,2.089 12,2.089Z"
            className={classes.icon}
          />
        </g>
      </g>
    </svg>
  }
/>;

const useRadioButtonClasses = makeStyles<ITheme, IRadioButtonErrorProps>(
  (theme) =>
    createStyles({
      radio: { color: theme.mvf.palette.border },
      card: {
        height: '100%',
      },
      icon: ({ isError }) => ({
        fill: theme.mvf.palette.border,
        ...(isError && {
          fill: theme.mvf.palette.error,
        }),
      }),
      selectedRadioIcon: ({ isError }) => ({
        fill: theme.mvf.palette.primary.main,
        ...(isError && {
          fill: theme.mvf.palette.error,
        }),
      }),
...etc

我假設有一定的知識水平，因為這不是完整的代碼，但MURadio是我們的應用程序中使用的v4材質ui單選按鈕，自定義svg位于該材質ui組件的一個道具中——因此您需要更改默認的單選圖標...您可以動態地將主題顏色應用到自定義單選圖標(svg)上，當我傳遞isError狀態時，就像這樣const classes = useRadioButtonClasses({ isError })；因此，如果有錯誤，我們可以改變svg的顏色。

為我和相同的設置(class.icon)工作，因為我們樣式的常規組件，希望它能幫助你。