提问者:小点点

如何使用CSS在超文本标记语言中设置外部SVG颜色?[重复]


我正在尝试在我的网页上使用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文件并使其颜色为红色。但它不起作用,因为你看到我的输出。

有人能帮我解决这个问题吗?

非常感谢您的帮助。


共3个答案

匿名用户

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

您需要在heart_border. svg中包含CSS,例如通过添加

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

匿名用户

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

兼容任何可以处理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>

匿名用户

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

相反,您需要在svg元素上设置它。

像这样的东西:

.red_color_svg svg {
   fill: currentColor;
}