img src SVG改变填充颜色

时间：2014-07-24 12:15:31

标签： css image css3 svg

HTML 

<img src="logo.svg" alt="Logo" class="logo-img">

CSS 

.logo-img path {
  fill: #000;
}

上面的svg加载并且本身fill: #fff但是当我使用上面的css尝试将其更改为黑色时它不会改变，这是我第一次玩SVG和我我不确定为什么它不起作用。

24 个答案:

答案 0 :(得分：216)

您需要将SVG设为内嵌SVG 。您可以通过向图像添加类svg来使用此脚本：

/*
 * Replace all SVG images with inline SVG
 */
jQuery('img.svg').each(function(){
    var $img = jQuery(this);
    var imgID = $img.attr('id');
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');

    jQuery.get(imgURL, function(data) {
        // Get the SVG tag, ignore the rest
        var $svg = jQuery(data).find('svg');

        // Add replaced image's ID to the new SVG
        if(typeof imgID !== 'undefined') {
            $svg = $svg.attr('id', imgID);
        }
        // Add replaced image's classes to the new SVG
        if(typeof imgClass !== 'undefined') {
            $svg = $svg.attr('class', imgClass+' replaced-svg');
        }

        // Remove any invalid XML tags as per http://validator.w3.org
        $svg = $svg.removeAttr('xmlns:a');

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
            $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
        }

        // Replace image with new SVG
        $img.replaceWith($svg);

    }, 'xml');

});

然后，现在，如果你这样做：

.logo-img path {
  fill: #000;
}

或者可能是：

.logo-img path {
  background-color: #000;
}

这有效！

小提琴：http://jsfiddle.net/wuSF7/462/

上述脚本的致谢：How to change color of SVG image using CSS (jQuery SVG image replacement)?

答案 1 :(得分：114)

如果您的目标只是更改徽标的颜色，并且您不一定需要使用CSS，那么请不要使用javascript或jquery，就像之前的一些答案所建议的那样。

要精确回答原始问题，只需：

  1. 在文本编辑器中打开logo.svg。

  2. 寻找fill: #fff并将其替换为fill: #000

    3. 例如，在文本编辑器中打开时，logo.svg可能如下所示：

    <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>

    ...只需更改填充并保存即可。

答案 2 :(得分：37)

尝试使用纯CSS：

my_checkpointing_config = tf.estimator.RunConfig(
    save_checkpoints_secs = 20*60,  # Save checkpoints every 20 minutes.
    keep_checkpoint_max = 10,       # Retain the 10 most recent checkpoints.
)
classifier = tf.estimator.DNNClassifier(
    feature_columns=my_feature_columns,
    hidden_units=[10, 10],
    n_classes=3,
    model_dir='models/iris',
    config=my_checkpointing_config)



$ ls -1 models/iris
checkpoint
events.out.tfevents.timestamp.hostname
graph.pbtxt
model.ckpt-1.data-00000-of-00001
model.ckpt-1.index
model.ckpt-1.meta
model.ckpt-200.data-00000-of-00001
model.ckpt-200.index
model.ckpt-200.meta

本文更多信息https://blog.union.io/code/2017/08/10/img-svg-fill/

答案 3 :(得分：14)

@Praveen的答案很可靠。

我无法让它在我的工作中做出回应，所以我为它做了一个jquery悬停功能。

<强> CSS 

.svg path {
   transition:0.3s all !important;
}

JS / JQuery 

// code from above wrapped into a function
replaceSVG();

// hover function
// hover over an element, and find the SVG that you want to change
$('.element').hover(function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#CCC');
}, function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#3A3A3A');
});

答案 4 :(得分：14)

编辑您的SVG文件，将fill="currentColor"添加到svg标签中，并确保从文件中删除所有其他填充属性。

例如：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 139.435269383854" id="img" fill="currentColor">...
</svg>

请注意，currentColor是关键字（使用的不是固定颜色）。

之后，可以通过设置元素的color属性或从其父元素来使用CSS更改颜色。

示例：

.div-with-svg-inside {
    color: red;
}

我忘了说了，您必须以这种方式插入SVG：

      <svg>
        <use xlink:href='/assets/file.svg#img'></use>
      </svg>

请注意，#img是svg文件中svg标签的ID。

另一种方式：https://css-tricks.com/cascading-svg-fill-color/

答案 5 :(得分：13)

2018：如果您想要动态颜色，不想使用javascript，也不想内置SVG，请使用CSS变量。适用于Chrome，Firefox和Safari。编辑：和Edge 

<svg>
    <use xlink:href="logo.svg" style="--color_fill: #000;"></use>
</svg>

在您的SVG中，将style="fill: #000"的所有实例替换为style="fill: var(--color_fill)"。

答案 6 :(得分：12)

这个答案基于答案https://stackoverflow.com/a/24933495/3890888，但是使用了那里使用的脚本的简单JavaScript版本。

您需要将SVG设为内嵌SVG 。您可以通过向图像添加类svg来使用此脚本：

/*
 * Replace all SVG images with inline SVG
 */
document.querySelectorAll('img.svg').forEach(function(img){
    var imgID = img.id;
    var imgClass = img.className;
    var imgURL = img.src;

    fetch(imgURL).then(function(response) {
        return response.text();
    }).then(function(text){

        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(text, "text/xml");

        // Get the SVG tag, ignore the rest
        var svg = xmlDoc.getElementsByTagName('svg')[0];

        // Add replaced image's ID to the new SVG
        if(typeof imgID !== 'undefined') {
            svg.setAttribute('id', imgID);
        }
        // Add replaced image's classes to the new SVG
        if(typeof imgClass !== 'undefined') {
            svg.setAttribute('class', imgClass+' replaced-svg');
        }

        // Remove any invalid XML tags as per http://validator.w3.org
        svg.removeAttribute('xmlns:a');

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!svg.getAttribute('viewBox') && svg.getAttribute('height') && svg.getAttribute('width')) {
            svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
        }

        // Replace image with new SVG
        img.parentNode.replaceChild(svg, img);

    });

});

然后，现在，如果你这样做：

.logo-img path {
  fill: #000;
}

或者可能是：

.logo-img path {
  background-color: #000;
}

JSFiddle：http://jsfiddle.net/erxu0dzz/1/

答案 7 :(得分：11)

为什么不用svg图像或图像创建webfont，在css中导入webfont然后只使用css颜色属性更改字形的颜色？ 不需要javascript

答案 8 :(得分：7)

您首先必须将SVG注入HTML DOM。

有一个名为SVGInject的开源库为您完成此操作。它使用onload属性触发注入。

这是使用SVGInject的最小示例：

<html>
  <head>
    <script src="svg-inject.min.js"></script>
  </head>
  <body>
    <img src="image.svg" onload="SVGInject(this)" />
  </body>
</html>

在加载图像后，onload="SVGInject(this)将触发注入，<img>元素将由src属性中提供的SVG文件的内容替换。

它解决了SVG注入的几个问题：

    可以隐藏

  1. SVG，直到完成注射。如果在加载期间已经应用了样式，这很重要，否则会导致短暂的“未样式化内容闪烁”。

  2. <img>元素自动注入。如果您动态添加SVG，则不必担心再次调用注入功能。

  3. 如果将SVG多次注入，则将随机字符串添加到SVG中的每个ID，以避免在文档中多次具有相同的ID。

SVGInject是纯Javascript，可与所有支持SVG的浏览器一起使用。

免责声明：我是SVGInject的合著者

答案 9 :(得分：4)

要扩展@gringo答案，其他答案中描述的Javascript方法可行，但需要用户下载不必要的图像文件，而IMO会使您的代码膨胀。

我认为更好的方法是将所有单色矢量图形迁移到webfont文件。我过去使用过Fort Awesome，将SVG格式的自定义图标/图像与您可能使用的任何第三方图标（Font Awesome，Bootstrap图标等）结合起来非常有效。到用户必须下载的单个webfont文件中。您也可以自定义它，因此您只需包含您正在使用的第三方图标。这样可以减少页面发出的请求数量，并降低整体页面权重，尤其是在您已经包含任何第三方图标库的情况下。

如果您更喜欢更面向开发的选项，可以Google "npm svg webfont"，并使用最适合您环境的节点模块之一。

有一次，您已经完成了这两个选项中的任何一个，那么您可以通过CSS轻松更改颜色，而且很可能是您在此过程中加快了网站的速度。

答案 10 :(得分：2)

如果仅在实色和黑白之间切换图像，则可以将一个选择器设置为：

{filter：none;}

，另一个为：

{filter:grayscale(100%);}

答案 11 :(得分：1)

您的主要问题是您从update(modsa[[1]], data = d1[1:7, ])标签导入svg，这将隐藏SVG结构。

您需要将<img>标记与<svg>结合使用才能获得所需的效果。要使其正常工作，您需要在SVG文件<use>中为要使用的路径指定id，然后才能从<path id='myName'...>标记中检索它们。 试试下面的剪辑。

＆＃13;
＆＃13; 
<use xlink:href="#myName"/>
＆＃13; 
.icon {
  display: inline-block;
  width: 2em;
  height: 2em;
  transition: .5s;
  fill: currentColor;
  stroke-width: 5;
  }
  .icon:hover {
    fill: rgba(255,255,255,0);
    stroke: black;
    stroke-width: 2;
    }

.red {
  color: red;
  }

.blue {
  color: blue;
  }
＆＃13;
＆＃13;
＆＃13;

请注意，如果要从external source加载SVG（而不是将其嵌入HTML），可以在片段<svg width="0" height="0"> <defs> <path id="home" d="M100 59.375l-18.75-18.75v-28.125h-12.5v15.625l-18.75-18.75-50 50v3.125h12.5v31.25h31.25v-18.75h12.5v18.75h31.25v-31.25h12.5z"/> </svg> <span class="icon red"> <svg viewbox="0 0 100 100"> <use xlink:href="#home"/> </svg> </span> <span class="icon blue"> <svg viewbox="0 0 100 100"> <use xlink:href="#home"/> </svg> </span>之前放置任何网址。此外，通常您不指定填充CSS。考虑在SVG中使用#会更好。然后将使用相应元素的CSS颜色值。

答案 12 :(得分：0)

知道这是一个古老的问题，但是最近我们遇到了相同的问题，我们从服务器端解决了这个问题。这是特定于php的答案，但我肯定其他环境也有类似的东西。 而不是使用img标签，而是从一开始就将svg呈现为svg。

public static function print_svg($file){
    $iconfile = new \DOMDocument();
    $iconfile->load($file);
    $tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
    return $tag;
}

现在渲染文件时，您将获得完整的内嵌svg

答案 13 :(得分：0)

由于SVG基本上是代码，因此您只需要内容。我用PHP来获取内容，但你可以随意使用它。

<?php
$content    = file_get_contents($pathToSVG);
?>

然后，我在div容器中“按原样”打印内容

<div class="fill-class"><?php echo $content;?></div>

最终在CSS上将规则设置为容器的SVG子项

.fill-class > svg { 
    fill: orange;
}

我用物料图标SVG获得了这个结果：

Mozilla Firefox 59.0.2（64位）Linux

enter image description here

谷歌Chrome66.0.3359.181（Build oficial）（64位）Linux

enter image description here

Opera 53.0.2907.37 Linux

enter image description here

答案 14 :(得分：0)

这对于将PHP与.svg图像结合使用并希望通过CSS进行处理的人们很有帮助。

您不能使用CSS覆盖img标签内的属性。但是，当将svg源代码嵌入HTML时，您肯定可以。我喜欢使用require_once函数解决此问题，其中包含一个.svg.php文件。就像导入图像一样，但是您仍然可以使用CSS覆盖样式！

首先包含svg文件：

<?php require_once( '/assets/images/my-icon.svg.php' ); ?>

其中包括此图标，例如：

<svg xmlns="http://www.w3.org/2000/svg" width="20.666" height="59.084" viewBox="0 0 20.666 59.084"><g transform="translate(-639.749 -3139)"><path d="M648.536,3173.876c0-2.875-1.725-3.8-3.471-3.8-1.683,0-3.49.9-3.49,3.8,0,3,1.786,3.8,3.49,3.8C646.811,3177.676,648.536,3176.769,648.536,3173.876Zm-3.471,2.341c-.883,0-1.437-.513-1.437-2.341,0-1.971.615-2.381,1.437-2.381.862,0,1.438.349,1.438,2.381,0,1.907-.616,2.339-1.438,2.339Z" fill="#142312"/><path d="M653.471,3170.076a1.565,1.565,0,0,0-1.416.9l-6.558,13.888h1.2a1.565,1.565,0,0,0,1.416-.9l6.559-13.887Z" fill="#142312"/><path d="M655.107,3177.263c-1.684,0-3.471.9-3.471,3.8,0,3,1.766,3.8,3.471,3.8,1.745,0,3.49-.9,3.49-3.8C658.6,3178.186,656.851,3177.263,655.107,3177.263Zm0,6.139c-.884,0-1.438-.514-1.438-2.34,0-1.972.617-2.381,1.438-2.381.862,0,1.437.349,1.437,2.381,0,1.909-.616,2.34-1.437,2.34Z" fill="#142312"/><path d="M656.263,3159.023l-1.49-14.063a1.35,1.35,0,0,0,.329-.293,1.319,1.319,0,0,0,.268-1.123l-.753-3.49a1.328,1.328,0,0,0-1.306-1.054h-6.448a1.336,1.336,0,0,0-1.311,1.068l-.71,3.493a1.344,1.344,0,0,0,.276,1.112,1.532,1.532,0,0,0,.283.262l-1.489,14.087c-1.7,1.727-4.153,4.871-4.153,8.638v28.924a1.339,1.339,0,0,0,1.168,1.49,1.357,1.357,0,0,0,.17.01h17.981a1.366,1.366,0,0,0,1.337-1.366v-29.059C660.414,3163.893,657.963,3160.749,656.263,3159.023Zm-8.307-17.349h4.274l.176.815H647.79Zm9.785,43.634v10.1H642.434v-17.253a4.728,4.728,0,0,1-2.028-4.284,4.661,4.661,0,0,1,2.028-4.215v-2c0-3.162,2.581-5.986,3.687-7.059a1.356,1.356,0,0,0,.4-.819l1.542-14.614H652.1l1.545,14.618a1.362,1.362,0,0,0,.4.819c1.109,1.072,3.688,3.9,3.688,7.059v9.153a5.457,5.457,0,0,1,0,8.5Z" fill="#142312"/></g></svg>

现在，我们可以使用CSS轻松地更改填充颜色：

svg path {
  fill: blue;
}

我首先尝试使用file_get_contents()解决此问题，但上述解决方案要快得多。

答案 15 :(得分：0)

简单..

您可以使用以下代码：

<svg class="logo">
  <use xlink:href="../../static/icons/logo.svg#Capa_1"></use>
</svg>

首先指定svg的路径，然后输入其ID，在这种情况下为“ Capa_1”。您可以通过在任何编辑器中打开svg来获取其ID。

在CSS中：

.logo {
  fill: red;
}

答案 16 :(得分：0)

使用滤镜将其转换为任何颜色。

我最近找到了这种解决方案，希望有人可以使用它。 由于该解决方案使用滤镜，因此可以用于任何类型的图像。不只是svg。

如果您只想更改彩色图像，则可以在某些滤镜的帮助下进行操作。当然，它也适用于多色图像，但是您不能指定特定的颜色。只有整个图像。

过滤器来自How to transform black into any given color using only CSS filters中建议的脚本 如果要将白色更改为任何颜色，可以调整每个滤镜中的反转值。

.startAsBlack{
  display: inline-block;
  width: 50px;
  height: 50px;
  background: black;
}

.black-green{
  filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(128%) contrast(119%);
}

.black-red{
  filter: invert(37%) sepia(93%) saturate(7471%) hue-rotate(356deg) brightness(91%) contrast(135%);
}

.black-blue{
  filter: invert(12%) sepia(83%) saturate(5841%) hue-rotate(244deg) brightness(87%) contrast(153%);
}

.black-purple{
  filter: invert(18%) sepia(98%) saturate(2657%) hue-rotate(289deg) brightness(121%) contrast(140%);
}
Black to any color: <br/>
<div class="startAsBlack black-green"></div>
<div class="startAsBlack black-red"></div>
<div class="startAsBlack black-blue"></div>
<div class="startAsBlack black-purple"></div>

答案 17 :(得分：0)

在代码编辑器中打开svg图标，并在path标记后添加一个类：

<path class'colorToChange' ...

您可以将类添加到svg并更改颜色，如下所示：

codepen

答案 18 :(得分：0)

对我来说，将它们作为img和svg时，我的svg看起来有所不同。因此，我的解决方案将img转换为csv，在内部更改样式，然后再转换回img（尽管需要做更多的工作），我相信“ blob”比使用“ mask”的答案更具有兼容性。

  let img = yourimgs[0];
  if (img.src.includes(".svg")) {
    var ajax = new XMLHttpRequest();
    ajax.open("GET", img.src, true);
    ajax.send();
    ajax.onload = function (e) {
     
      svg = e.target.responseText;

     
      svgText = "";
      //change your svg-string as youd like, for example
      // replacing the hex color between "{fill:" and ";"
      idx = svg.indexOf("{fill:");
      substr = svg.substr(idx + 6);
      str1 = svg.substr(0, idx + 6);
      str2 = substr.substr(substr.indexOf(";"));
      svgText = str1 + "#ff0000" + str2;
      

      let blob = new Blob([svgText], { type: "image/svg+xml" });
      let url = URL.createObjectURL(blob);
      let image = document.createElement("img");
      image.src = url;
      image.addEventListener("load", () => URL.revokeObjectURL(url), {
        once: true,
      });
      img.replaceWith(image);
    };
  }

答案 19 :(得分：0)

我建议选择您的颜色，然后转到此笔 https://codepen.io/sosuke/pen/Pjoqqp 它将十六进制转换为CSS过滤器，例如：.filterit{ width:270px; filter: invert(88%) sepia(21%) saturate(935%) hue-rotate(123deg) brightness(85%) contrast(97%); }

等于

<img src="https://www.flaticon.com/svg/static/icons/svg/1389/1389029.svg"
class="filterit

/>

最终摘要 

{{1}}
{{1}}

答案 20 :(得分：0)

为此，您必须将 SVG 用作内联 HTML。

说这是你的 logo.svg 代码（当你在 textEditor 上打开它时）：

标志.SVG

<svg width="139" height="100" xmlns="http://www.w3.org/2000/svg">
    <!-- Note that I've Added Class Attribute 'logo-img' Here -->
    <g transform="translate(-22 -45)" fill="none" fill-rule="evenodd">
        <path
            d="M158.023 48.118a7.625 7.625 0 01-.266 10.78l-88.11 83.875a7.625 7.625 0 01-10.995-.5l-33.89-38.712a7.625 7.625 0 0111.475-10.045l28.653 32.73 82.353-78.394a7.625 7.625 0 0110.78.266z"
            fill="#00000" />
    </g>
</svg>

添加你想要的类/ID（我已经添加了'logo-img'）：

编辑 Svg

<svg class="logo-img" width="139" height="100" xmlns="http://www.w3.org/2000/svg">
    <!-- Note that I've Added Class Attribute 'logo-img' Here -->
    ...
</svg>

现在应用你的 CSS 规则：

CSS

.logo-img path {
   fill: #000;
}

专业版

  • 通过这种方式，您可以为用户的操作（悬停、选择等）设置动画

缺点

  • 你的 HTML 文件会一团糟。

这是一个堆栈片段

<style>
        body {
            display: flex;
            justify-content: center;
        }
        .logo-img path {
            transition: .5s all linear;
        }
        .logo-img path {
            fill: coral;
        }
        .logo-img:hover path{
            fill: darkblue;
        }
        
    </style>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>

<body>
    <svg class="logo-img" width="139" height="100" xmlns="http://www.w3.org/2000/svg">
        <!-- Note that I've Added Class Attribute 'logo-img' Here -->
        <g transform="translate(-22 -45)" fill="none" fill-rule="evenodd">
            <path
                d="M158.023 48.118a7.625 7.625 0 01-.266 10.78l-88.11 83.875a7.625 7.625 0 01-10.995-.5l-33.89-38.712a7.625 7.625 0 0111.475-10.045l28.653 32.73 82.353-78.394a7.625 7.625 0 0110.78.266z"
                fill="#00000" />
        </g>
    </svg>
</body>

</html>

答案 21 :(得分：0)

如果您的形状始终是一种纯色并且您有多个，您可以前往 Fontello.com 并使用一系列您自己的自定义 SVG 形状制作自定义图标字体。然后你可以单独用 CSS 改变它们的大小和颜色。

在 Fontello 上，您可以将您的形状与其他图标库的常见形状子集相结合，并将其全部导出为一组以在您的网站上使用，这比仅为几个字形加载整个图标库节省了加载时间。您可以保存您的设置并在以后编辑它和形状。

对于这个问题的所有可能用例，这是一个需要考虑的基本范例。我已经在许多项目中使用过它。无论如何，如果您还没有听说过 Fontello，那么您需要了解它。如果您知道更好的类似解决方案，我很想知道。

可能的失败：

  1. 众所周知，图标/形状字体会干扰屏幕阅读器，因此可能需要一些处理。

  2. Fontello 可能对导入形状很挑剔，创作和导出它们可能需要反复试验。 （我会根据建议更新此答案。）

  3. 我希望也能从 Fontello 导出一个最简单的用例，因为如果您想取消对旧版浏览器的支持，需要进行一些清理工作。

答案 22 :(得分：-1)

为什么不仅仅使用CSS的filter属性来操纵:hover上的颜色或其他状态？我发现它可以将SVG图片转换为img标签。至少到2020年，它几乎得到了完全支持。对我来说，这是最简单的解决方案。唯一的警告是必须调整滤镜属性才能找到目标颜色。但是您还有一个非常有用的tool。

答案 23 :(得分：-2)

直接用svg填充CSS无效，您可以按以下方式使用

FROM cespi/php-5.3:apache-latest

COPY php.ini /usr/local/etc/php/

这对我有用

相关问题
最新问题