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

9 浏览
0 Comments

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

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

但它的颜色是黑色的。

所以，我想要改变它的颜色。

所以，我做了以下操作 -

.red_color_svg
{
    color: red;
    border: 5px solid currentColor;
    fill: currentColor;
}

导入heart_border.svg文件并将其颜色改为红色。但正如您在输出中所见，它没有起作用。

有谁可以帮忙解决这个问题吗？

非常感谢您的帮助。

0

3 答案

0 Comments

CSS不适用于跨文档，而在这里你有两个文档，分别是heart_border.svg和容器html文档。

你需要在heart_border.svg中包含CSS，例如通过添加<link>元素或<xml-stylesheet>处理指令，或通过在该文件中添加内联的<style>元素来实现。

或者，如果你将SVG内联到html文档中，这样你只有一个文档，CSS也会生效。

0
0 Comments

问题的原因是要在HTML中使用CSS来设置外部SVG的颜色。解决方法是使用SVG滤镜来定义一个feColorMatrix滤镜，并将其应用于外部图像。

以下是解决方法的代码示例：

此外，还提供了一个ColorMatrixHelper类来生成矩阵颜色。可以使用getMatrix方法将十六进制颜色转换为矩阵颜色。

interface RgbColor {
  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);
  }
  private static hexToRgb(hex3or6): RgbColor {
    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) {
      matrix =
        `0 0 0 0 ${rgbColor.r} ` +
        `0 0 0 0 ${rgbColor.g} ` +
        `0 0 0 0 ${rgbColor.b} ` +
        `0 0 0 ${rgbColor.a} 0`;
    } else {
      matrix =
        `1 0 0 0 0 ` +
        `0 1 0 0 0 ` +
        `0 0 1 0 0 ` +
        `0 0 0 1 0`;
    }
    return matrix;
  }
}

以上是如何在HTML中使用CSS设置外部SVG颜色的原因和解决方法。

0
0 Comments

问题的原因是当前的代码将填充设置在object元素上，而不是svg元素上。解决方法是将填充设置在svg元素上，代码如下：

.red_color_svg svg {
   fill: currentColor;
}

0