img src SVG改变填充颜色
HTML
<img src="logo.svg" alt="Logo" class="logo-img"> CSS
.logo-img path { fill: #000; }
上面的svg加载和本地fill: #fff但是当我使用上面的css来尝试改变它黑色它不会改变，这是我第一次玩SVG，我不知道为什么它不工作。
您需要使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/
上述脚本的信用： 如何使用CSS（jQuery SVG图像replace）更改SVG图像的颜色？
如果你的目标只是改变标志的颜色，你不一定需要使用CSS，那么不要像以前的答案所提示的那样使用javascript或jquery。
要正确回答原来的问题，只是：
-
在文本编辑器中打开您的
logo.svg。 -
寻找
fill: #fff并用fill: #000replace它
例如，在文本编辑器中打开时，您的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>
…只是改变填充和保存。
@Praveen的答案是坚实的。
我无法得到它在我的工作回应，所以我做了一个jQuery的hoverfunction。
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'); });
你可以把你的svg设置成一个面具。 这样设置背景颜色将作为您的填充颜色。
HTML
<div class="logo"></div>
CSS
.logo { background-color: red; -webkit-mask: url(logo.svg) no-repeat center; mask: url(logo.svg) no-repeat center; }
JSFiddle： https ：//jsfiddle.net/KuhlTime/2j8exgcb/
请注意，此方法不适用于Edge浏览器。 您可以通过访问以下网站来查看： https ： //caniuse.com/#search=mask
为什么不用你的svg图像或图像创build一个webfont，在css中导入webfont，然后用css color属性改变字形的颜色？ 没有JavaScript需要
为了扩大@gringo答案，其他答案中描述的Javascript方法起作用，但要求用户下载不必要的图像文件和IMO，它膨胀了你的代码。
我认为一个更好的方法是将所有的1色vectorgraphics迁移到webfont文件。 过去，我使用了Fort Awesome ，并且将SVG格式的自定义图标/图像，以及您可能使用的任何第三方图标（Font Awesome，Bootstrap图标等）合并到一个webfont文件用户必须下载。 你也可以自定义它，所以你只包括你使用的第三方图标。 这减less了页面所要求的请求数量，而且整个页面的重量，特别是如果你已经包括任何第三方图标库。
如果您更喜欢更加面向开发的选项，您可以使用Google“npm svg webfont” ，并使用最适合您的环境的节点模块之一。
有一次，你已经完成了这两个选项中的任何一个，那么你可以很容易地通过CSS来改变颜色，而且很可能你在这个过程中加快了你的网站。
这个答案是基于回答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/
如果您有权访问JQuery，然后扩展到Praveen的答案，可以通过以下步骤以编程方式更改SVG中不同嵌套元素的颜色：
$('svg').find('path, text').css('fill', '#ffffff');
在发现之中，你可以提到需要改变颜色的不同元素。
