如何使用 CSS 在 HTML 中设置外部 SVG 颜色

How to set a External SVG color in HTML using CSS?

本文关键字：设置 外部 SVG 颜色 HTML 何使用 CSS      更新时间：2023-09-26

我正在尝试在我的网页上使用SVG。

但它的颜色是黑色的。所以，我希望它被改变。所以，我做到了——

.red_color_svg
{
    color: red;
    border: 5px solid currentColor;
    fill: currentColor;
}
<object type="image/svg+xml" data="https://rawcdn.githack.com/encharm/Font-Awesome-SVG-PNG/master/black/svg/heart.svg" class="weather_icon red_color_svg circle"></object>

导入heart_border.svg文件并将其颜色设置为红色。但它不起作用，如您所看到的输出。

谁能帮我解决这个问题？

提前非常感谢您的帮助。

CSS 不应用交叉文档，这里有两个文档heart_border.svg和容器 html 文档。

您需要在heart_border.svg中包含 CSS，例如通过添加 <link> 元素或<xml-stylesheet>处理指令，或者通过 <style> 元素将其内联添加到该文件中。

或者，如果您在 html 文档本身中添加内联 SVG，以便您只有一个文档，则 CSS 将应用 CSS。

这个线程很旧，但我想分享我的解决方案，基于 SVG 过滤器。您只需要根据需要定义一个feColorMatrix滤镜并将其应用于外部图像。有关更多详细信息，请参阅下面的示例。

与任何可以处理 SVG 的浏览器兼容。

<svg width="100%" height="100%" class="draggable">
  <defs>
    <filter id="customColor1">
      <!-- Match hex color for #50A -->
      <feColorMatrix
        in="SourceGraphic"
        type="matrix"
        values="0 0 0 0 0.3333333333333333 0 0 0 0 0 0 0 0 0 0.6666666666666666 0 0 0 1 0"
      ></feColorMatrix>
    </filter>
    
    <filter id="customColor2">
      <!-- Match hex color for #0F0 -->
      <feColorMatrix
        in="SourceGraphic"
        type="matrix"
        values="0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0"
      ></feColorMatrix>
    </filter>
  </defs>
  <image href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg" width="50" height="50"></image>
  <image href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg" filter="url(#customColor1)" width="50" height="50" x="100"></image>
  <image href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg" filter="url(#customColor2)" width="50" height="50" x="200"></image>
  
</svg>

[奖金] 

// A little helper to generate matrix color from source and destination colors
// To easily dive in : https://codepen.io/jacobberglund/pen/ORNQAr
// To understand what's going on here read this article by A List Apart
// https://alistapart.com/article/finessing-fecolormatrix/
interface RgbColor {
  /** Values are in percent (ex: 255,127,0,255 => 1,0.5,0,1) */
  r: number;
  g: number;
  b: number;
  a: number;
}
export class ColorMatrixHelper {
  public static getMatrix(hexColor: string) {
    const rgbColor: RgbColor = ColorMatrixHelper.hexToRgb(hexColor);
    return ColorMatrixHelper.computeMatrixColor(rgbColor);
  }
  // Inspired by this answer : https://stackoverflow.com/a/5624139/11480016
  private static hexToRgb(hex3or6): RgbColor {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    const shorthandRegex = /^#?([a-f'd])([a-f'd])([a-f'd])$/i;
    const hex6 = hex3or6.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
    var result = /^#?([a-f'd]{2})([a-f'd]{2})([a-f'd]{2})([a-f'd]{2})?$/i.exec(hex6);
    const base = 1 / 255;
    return result
      ? {
          r: parseInt(result[1], 16) * base,
          g: parseInt(result[2], 16) * base,
          b: parseInt(result[3], 16) * base,
          a: result[4] ? parseInt(result[4], 16) * base : 1,
        }
      : null;
  }
  private static computeMatrixColor(rgbColor: RgbColor): string {
    let matrix;
    if (rgbColor) {
      // Ignore original colors and apply the new one
      matrix =
        `0 0 0 0 ${rgbColor.r} ` + // Red
        `0 0 0 0 ${rgbColor.g} ` + // Green
        `0 0 0 0 ${rgbColor.b} ` + // Blue
        `0 0 0 ${rgbColor.a} 0`; // Alpha
    } else {
      // Identity (keep orignal colors)
      matrix =
        `1 0 0 0 0 ` + // Red
        `0 1 0 0 0 ` + // Green
        `0 0 1 0 0 ` + // Blue
        `0 0 0 1 0`; // Alpha
    }
    return matrix;
  }
}

使用当前代码，您可以在 object 元素上设置填充。

相反，您需要将其设置在svg元素上。

像这样：

.red_color_svg svg {
   fill: currentColor;
}

问题是你没有针对实际的 SVG 元素，而是针对"SVG 容器"。为了能够更改 SVG 中某个元素的颜色，您必须定位该特定元素。

例如，更改 SVG 中所有路径的填充颜色：

.weather_icon path {
    fill: yellow;
}

如果你想更容易处理，请将类名添加到 svg 中的不同元素中。

<path class="my-class" ......... />

这将使得通过类定位特定元素成为可能：

.weather_icon .my-class {
    fill:blue;
    stroke:green;
}

你真的需要SVG作为外部文件吗？ 您可能希望将 SVG 放在本地文档中一次。 

<div style="display: none">
    <svg><g id="svg1"><path d="some exampe path"/></g></svg>
</div>

并在多个地方链接到它

<svg viewBox="0 0 64 64"><use xlink:href="#svg1"></use></svg>

您可以单独设置每个链接的样式

相关文章：