我的用法是引导图标，复制您的SVG路径。

span{
    path{
        color: red;
    }
}

SVG引导的一个例子:

        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
          class="bi bi-exclamation-octagon" viewBox="0 0 16 16">
          <path
            d="M4.54.146A.5.5 0 0 1 4.893 0h6.214a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353L4.54.146zM5.1 1 1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1H5.1z" />
          <path
            d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z" />
        </svg>

使用浏览器打开图像，右键单击图像，点击查看页面源代码，您将看到图像的svg标记。应付和粘贴到你的html，然后改变填补你所选择的颜色

2020的答案

CSS过滤器适用于所有当前的浏览器

改变任何SVGs的颜色

Add the SVG image using an <img> tag. <img src="dotted-arrow.svg" class="filter-green"/> To filter to a specific color, use the following Codepen (click here to open the codepen) to convert a hexadecimal color code to a CSS filter: For example, output for #00EE00 is filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%); Add the CSS filter into this class. .filter-green{ filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%); }

我的答案是。但我不确定它是否对每个人都适用:

选择“svg”，然后选择“path”。然后你可以改变'fill'。

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

2022 Web组件<load-file>回答

这个(8行)原生Web组件加载外部内容，并将其注入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>

我发现它有点笨拙，但它绝对是一种动态改变<img>标记中包含的SVG颜色的工作方式。

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

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

在这里可以使用@media规则，SVG可以使用该规则查看自身以外的上下文环境。有一个宽高比媒体特性应用于SVG框(例如，<img>标记)。您可以通过稍微拉伸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必须包含viewBox信息，这样拉伸就不会影响图形。例子:

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