这是我想出的一段方便的代码的自我问答。
目前，没有一种简单的方法可以嵌入 SVG 图像，然后通过 CSS 访问 SVG 元素。使用 JS SVG 框架的方法有很多种，但如果你所做的只是制作一个带有翻转状态的简单图标，它们就过于复杂了。
所以这就是我想出的，我认为这是迄今为止在网站上使用 SVG 文件的最简单的方法。它的概念来自早期的文本到图像替换方法，但据我所知，SVG 从未这样做过。
这是问题：
如何在不使用 JS-SVG 框架的情况下嵌入 SVG 并在 CSS 中更改其颜色？
首先，在 HTML 中使用 IMG 标签嵌入 SVG 图形。我使用 Adobe Illustrator 制作图形。
<img id="facebook-logo" class="svg social-link" src="/images/logo-facebook.svg"/>
这就像您嵌入普通图像的方式一样。请注意，您需要将 IMG 设置为 svg 类。 'social-link' 类只是为了举例。 ID 不是必需的，但很有用。
然后使用这个 jQuery 代码（在单独的文件中或在 HEAD 中内联）。
/**
* 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');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
上面的代码所做的是查找所有具有类 'svg' 的 IMG，并将其替换为链接文件中的内联 SVG。巨大的优势是它允许您现在使用 CSS 来更改 SVG 的颜色，如下所示：
svg:hover path {
fill: red;
}
我编写的 jQuery 代码还跨原始图像 ID 和类进行了移植。所以这个 CSS 也可以：
#facebook-logo:hover path {
fill: red;
}
或者：
.social-link:hover path {
fill: red;
}
您可以在此处查看它的工作示例：http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html
我们有一个包含缓存的更复杂的版本：https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90
风格
svg path {
fill: #000;
}
脚本
$(document).ready(function() {
$('img[src$=".svg"]').each(function() {
var $img = jQuery(this);
var imgURL = $img.attr('src');
var attributes = $img.prop("attributes");
$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Remove any invalid XML tags
$svg = $svg.removeAttr('xmlns:a');
// Loop through IMG attributes and apply on SVG
$.each(attributes, function() {
$svg.attr(this.name, this.value);
});
// Replace IMG with SVG
$img.replaceWith($svg);
}, 'xml');
});
});
width="170.667" 就我而言
path 形状（如 rect）制成的，您还需要在 css 中处理它们
您现在可以在 most modern browsers 中使用 CSS filter property（包括 Edge，但不包括 IE11）。它适用于 SVG 图像以及其他元素。您可以使用 hue-rotate 或 invert 修改颜色，尽管它们不允许您单独修改不同的颜色。我使用以下 CSS 类来显示图标的“禁用”版本（其中原始是饱和颜色的 SVG 图片）：
.disabled {
opacity: 0.4;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
这使得它在大多数浏览器中为浅灰色。在 IE（可能还有 Opera Mini，我还没有测试过）中，它明显被 opacity 属性淡化了，尽管它不是灰色的，但它看起来仍然相当不错。
这是一个示例，其中 Twemoji 钟形图标有四个不同的 CSS 类：原始（黄色）、上述“禁用”类、hue-rotate（绿色）和 invert（蓝色）。
.twa-bell { background-image: url("https://twemoji.maxcdn.com/svg/1f514.svg");显示：内联块；背景重复：不重复；背景位置：中心中心；高度：3em；宽度：3em；保证金：0 0.15em 0 0.3em；垂直对齐：-0.3em；背景尺寸：3em 3em； } .grey-out { 不透明度：0.4;过滤器：灰度（100%）； -webkit-filter：灰度（100%）； } .hue-rotate { 滤镜：hue-rotate(90deg); -webkit 过滤器：色调旋转（90 度）； } .invert { 过滤器：反转（100%）； -webkit-过滤器：反转（100%）； }
if ($('.w3-top img').css("color") == "rgb(0, 0, 0)") { $('.w3-top img').css("filter", "invert(100%)"); $('.w3-top img').css("-webkit-filter", "invert(100%)"); };
或者，您可以使用 CSS mask，授予 browser support 不好，但您可以使用后备
.frame {
background: blue;
-webkit-mask: url(image.svg) center / contain no-repeat;
}
-webkit-mask 不应在任何生产网站上使用。
如果您可以在页面中包含文件（PHP 包含或通过您选择的 CMS 包含），您可以添加 SVG 代码并将其包含到您的页面中。这与将 SVG 源粘贴到页面中的效果相同，但会使页面标记更清晰。
好处是您可以通过 CSS 定位 SVG 的某些部分以进行悬停——不需要 javascript。
http://codepen.io/chriscoyier/pen/evcBu
你只需要使用这样的 CSS 规则：
#pathidorclass:hover { fill: #303 !important; }
请注意，!important 位是覆盖填充颜色所必需的。
<div ng-include="'svg.svg'"></div>
#pathidorclass:hover, .wrapperclass:hover #pathidorclass { fill: green; } 或者甚至只是消除 SVG 路径的原始悬停，因为无论如何您现在都是通过包装器元素来定位它。
TL/DR：去这里-> https://codepen.io/sosuke/pen/Pjoqqp
解释：
我假设你有这样的html：
<img src="/img/source.svg" class="myClass">
绝对走过滤路线，即。您的 svg 很可能是黑色或白色。您可以应用过滤器使其成为您想要的任何颜色，例如，我有一个黑色 svg，我想要薄荷绿色。我首先将其反转为白色（从技术上讲，它是全 RGB 颜色）然后使用色调饱和度等。为了让它正确：
filter: invert(86%) sepia(21%) saturate(761%) hue-rotate(92deg) brightness(99%) contrast(107%);
更好的是，您可以使用工具将所需的十六进制转换为过滤器：https://codepen.io/sosuke/pen/Pjoqqp
@Drew Baker 提供了一个很好的解决方案来解决这个问题。代码工作正常。然而，那些使用 AngularJs 的人可能会发现对 jQuery 有很多依赖。因此，我认为为 AngularJS 用户粘贴一个遵循@Drew Baker 解决方案的代码是个好主意。
AngularJs 方式相同的代码
1. Html：在你的 html 文件中使用 bellow 标签：
<svg-image src="/icons/my.svg" class="any-class-you-wish"></svg-image>
2. 指令：这将是您识别标签所需的指令：
'use strict';
angular.module('myApp')
.directive('svgImage', ['$http', function($http) {
return {
restrict: 'E',
link: function(scope, element) {
var imgURL = element.attr('src');
// if you want to use ng-include, then
// instead of the above line write the bellow:
// var imgURL = element.attr('ng-include');
var request = $http.get(
imgURL,
{'Content-Type': 'application/xml'}
);
scope.manipulateImgNode = function(data, elem){
var $svg = angular.element(data)[4];
var imgClass = elem.attr('class');
if(typeof(imgClass) !== 'undefined') {
var classes = imgClass.split(' ');
for(var i = 0; i < classes.length; ++i){
$svg.classList.add(classes[i]);
}
}
$svg.removeAttribute('xmlns:a');
return $svg;
};
request.success(function(data){
element.replaceWith(scope.manipulateImgNode(data, element));
});
}
};
}]);
3.CSS：
.any-class-you-wish{
border: 1px solid red;
height: 300px;
width: 120px
}
4. 使用 karma-jasmine 进行单元测试：
'use strict';
describe('Directive: svgImage', function() {
var $rootScope, $compile, element, scope, $httpBackend, apiUrl, data;
beforeEach(function() {
module('myApp');
inject(function($injector) {
$rootScope = $injector.get('$rootScope');
$compile = $injector.get('$compile');
$httpBackend = $injector.get('$httpBackend');
apiUrl = $injector.get('apiUrl');
});
scope = $rootScope.$new();
element = angular.element('<svg-image src="/icons/icon-man.svg" class="svg"></svg-image>');
element = $compile(element)(scope);
spyOn(scope, 'manipulateImgNode').andCallThrough();
$httpBackend.whenGET(apiUrl + 'me').respond(200, {});
data = '<?xml version="1.0" encoding="utf-8"?>' +
'<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->' +
'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">' +
'<!-- Obj -->' +
'<!-- Obj -->' +
'<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"' +
'width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">' +
'<g>' +
'<path fill="#F4A902" d=""/>' +
'<path fill="#F4A902" d=""/>' +
'</g>' +
'</svg>';
$httpBackend.expectGET('/icons/icon-man.svg').respond(200, data);
});
afterEach(function() {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
it('should call manipulateImgNode atleast once', function () {
$httpBackend.flush();
expect(scope.manipulateImgNode.callCount).toBe(1);
});
it('should return correct result', function () {
$httpBackend.flush();
var result = scope.manipulateImgNode(data, element);
expect(result).toBeDefined();
});
it('should define classes', function () {
$httpBackend.flush();
var result = scope.manipulateImgNode(data, element);
var classList = ["svg"];
expect(result.classList[0]).toBe(classList[0]);
});
});
<div ng-include="/icons/my.svg" class="any-class-you-wish"></div>
ng-include 一起使用，那么只需将此行 var imgURL = element.attr('src'); 更改为 var imgURL = element.attr('ng-include');
if (typeof(imgClass) !== 'undefined') { $svg.setAttribute("class", imgClass); } 而不是 split 和 for 循环。
angular.element(data)[0];) 的第一个元素并使其与 IE 一起使用 if ($svg.getAttribute('class')) { $svg.setAttribute('class', $svg.getAttribute('class') + ' ' + imgClass); } else { $svg.setAttribute('class', imgClass); }。此外，您可能希望将 cache: true 添加到 $http.get 的选项中，否则您的页面可能会变得非常慢。
我知道你想用 CSS 来完成这个，但只是提醒一下，以防它是一个小而简单的图像 - 你总是可以在 Notepad++ 中打开它并更改路径/任何元素的填充：
<path style="fill:#010002;" d="M394.854,205.444c9.218-15.461,19.102-30.181,14.258-49.527
...
C412.843,226.163,402.511,211.451,394.854,205.444z"/>
它可以节省大量丑陋的脚本。对不起，如果它不在基地，但有时简单的解决方案可能会被忽略。
...即使交换多个 svg 图像的大小也可能比该问题的某些代码片段小。
我写了一个指令来用 AngularJS 解决这个问题。它可用 here - ngReusableSvg。
它会在渲染后替换 SVG 元素，并将其放置在 div 元素中，使其 CSS 易于更改。这有助于在不同的地方使用不同的尺寸/颜色使用相同的 SVG 文件。
用法很简单：
<object oa-reusable-svg
data="my_icon.svg"
type="image/svg+xml"
class="svg-class"
height="30" // given to prevent UI glitches at switch time
width="30">
</object>
之后，您可以轻松拥有：
.svg-class svg {
fill: red; // whichever color you want
}
以下是基于已接受答案的 knockout.js 版本：
重要：它实际上也需要 jQuery 来替换，但我认为它可能对某些人有用。
ko.bindingHandlers.svgConvert =
{
'init': function ()
{
return { 'controlsDescendantBindings': true };
},
'update': function (element, valueAccessor, allBindings, viewModel, bindingContext)
{
var $img = $(element);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
$.get(imgURL, function (data)
{
// Get the SVG tag, ignore the rest
var $svg = $(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');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
}
};
然后只需将 data-bind="svgConvert: true" 应用于您的 img 标签。
此解决方案将 img 标记完全替换为 SVG，并且不会考虑任何其他绑定。
get 会再次请求它。我考虑将 img 标记上的 src 更改为 data-src 属性，但得出的结论是现代浏览器可能足够智能以缓存文件
有一个名为 SVGInject 的开源库，它使用 onload 属性来触发注入。您可以在 https://github.com/iconfu/svg-inject 找到 GitHub 项目
这是一个使用 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 注入的几个问题：
SVG 可以隐藏，直到注入完成。如果在加载期间已经应用了样式，这很重要，否则会导致短暂的“无样式内容闪烁”。 元素会自动注入。如果动态添加 SVG，则不必担心再次调用注入函数。将随机字符串添加到 SVG 中的每个 ID，以避免在多次注入 SVG 时在文档中多次使用相同的 ID。
SVGInject 是纯 Javascript，适用于所有支持 SVG 的浏览器。
免责声明：我是 SVGInject 的合著者
这是一个没有框架的代码，只有纯 js ：
document.querySelectorAll('img.svg').forEach(function(element) {
var imgID = element.getAttribute('id')
var imgClass = element.getAttribute('class')
var imgURL = element.getAttribute('src')
xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
var svg = xhr.responseXML.getElementsByTagName('svg')[0];
if(imgID != null) {
svg.setAttribute('id', imgID);
}
if(imgClass != null) {
svg.setAttribute('class', imgClass + ' replaced-svg');
}
svg.removeAttribute('xmlns:a')
if(!svg.hasAttribute('viewBox') && svg.hasAttribute('height') && svg.hasAttribute('width')) {
svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
}
element.parentElement.replaceChild(svg, element)
}
}
xhr.open('GET', imgURL, true)
xhr.send(null)
})
如果我们有更多此类 svg 图像，我们还可以借助字体文件。
https://glyphter.com/ 等网站可以从我们的 svg 中获取字体文件。
例如
@font-face {
font-family: 'iconFont';
src: url('iconFont.eot');
}
#target{
color: white;
font-size:96px;
font-family:iconFont;
}
您可以为此使用数据图像。使用 data-image(data-URI) 您可以像内联一样访问 SVG。
这是使用纯 CSS 和 SVG 的翻转效果。
我知道这很乱，但你可以这样做。
.action-btn { 背景尺寸：20px 20px;背景位置：中心中心；背景重复：不重复；边框宽度：1px；边框样式：实心；边框半径：30px；高度：40px；宽度：60px；显示：内联块； } .delete { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Capa_1' fill='#FB404B' xmlns='http:// www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='482.428px' height='482.429px 'viewBox='0 0 482.428 482.429' style='enable-background:new 0 0 482.428 482.429;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3cpath d='M381.163,57.799 h-75.094C302.323,25.316,274.686,0,241.214,0c-33.471,0-61.104,25.315-64.85,57.799h-75.098 c-30.39,0-55.111,24.728-55.111,55,.1127c-30.39,0-55.111,24.728-55.111,55,,3.27c.311,55,.1127c.3 43.1,34.83,51.199v260.369c0,30.39,24.724,55.117,55.112,55.117 h210.236c30.389,0,55.111-24.729,55.111-55.117V166.944c20.369-8.1,34.83-27.977,34.83-51.199v- 2.828 C436.274,82.527,411.551,57.799,381.163,57.799z M241.214,26.139c19.037,0,34.927,13.645,38.443,31.66h-76.879 C206.293,39.783,222.184,26.139,241.214,26.139z M375.305,427.312c0,15.978-13,28.979-28.973,28.979H136.096 c-15.973,0-28.973-13.002-28.973-28.979V170.861h268.182V427.5158.7,5158.7 -13,28.979-28.973,28.979H101.266 c-15.973,0-28.973-13.001-28.973-28.979v-2.828c0-15.978,13-28.979,28.973-28.979h279.1,897c15.93.03,8097 28.973,28.979 V115.744z'/%3e%3cpath d='M171.144,422.863c7.218,0,13.069-5.853,13.069-13.068V262.641c0-7.216-5.852-13.07-13.069-13.07-13.069-13.0. 13.069,5.854-13.069,13.07V147.154C158.074,417.012,163.926,422.863,171.144,422.863Z' 7.216-5.854-13.07-13.07-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C228.145,417.012,233.996,422.863,241.214,422.863z'/%3e%3cpath d='M311.284,422.863c7. 217,0,13.068-5.853,13.068-13.068V262.641c0-7.216-5.852-13.07-13.068-13.07 c-7.219,0-13.07,5.854-13.07,13.07v147.154C298.213,417.012,304.067,422.863,311.284,422.863 z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e ");边框颜色：#FB404B; } .delete:hover { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Capa_1' fill='#fff' xmlns='http: //www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='482.428px' height=' 482.429px'viewBox='0 0 482.428 482.429' style='enable-background:new 0 0 482.428 482.429;'xml:space='preserve'%3e%3cg%3e%3cg%3e%3cpath d='M381.163 ,57.799h-75.094C302.323,25.316,274.686,0,241.214,0c-33.471,0-61.104,25.315-64.85,57.799h-75.098 c-30.39,0-55.111,24.728-55.111,55.117v2.828c0,23.223, 14.46,43.1,34.83,51.199v260.369c0,30.39,24.724,55.117,55.112,55.117 h210.236c30.389,0,55.111-24.729,55.111-55.117V166.944c20.369-8.1,34.83-27.977,34.83-51.199 v-2.828 C436.274,82.527,411.551,57.799,381.163,57.799z M241.214,26.139c19.037,0,34.927,13.645,38.443,31.66h-76.879 C206.293,39.783,222.184,26.139,241.214, 26.139z M375.305,427.312c0,15.978-13,28.979-28.973,28.979H136.096 c-15.973,0-28.973-13.002-28.973-28.979V170.861h268.182V427.312z M410.135,115.744c0,15. 978-13,28.979-28.973,28.979H101.266 c-15.973,0-28.973-13.001-28.973-28.979v-2.828c0-15.978,13-28.979,28.973-28.979h73.012.897.973.9 ,28.973,28.979 V115.744z'/%3e%3cpath d='M171.144,422.863c7.218,0,13.069-5.853,13.069-13.068V262.641c0-7.216-5.852-13.07-13.061,70.7 -13.069,5.854-13.069,13.07V147.154C158.074,417.012,163.926,422.863,863,171.144,422.863Z' -7.216-5.854-13.07-13.07-13.07 C-7.217,217,0-13.069,5.854-13.069,13.07V147.154C222228.145,417.017.012,233.9996,422.863,863,21414.21414.214.4.214,42222.86,4,4,4,4,4,4,4,4,4,4,4,4222.80.149.49.49.4mmerd .217,0,13.068-5.853,13.068-13.068V262.641c0-7.216-5.852-13.07-13.068-13.07 c-7.219,0-13.07,5.854-13.07,13.07v147.154C298.213,417.012,304.067,422.863,311.284, 422.863z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e ");背景颜色：#FB404B； }
您可以在此处将您的 svg 转换为数据 url
https://codepen.io/elliz/full/ygvgay https://websemantics.uk/tools/svg-to-background-image-conversion/
由于 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
https://i.stack.imgur.com/hny3K.jpg
Google Chrome66.0.3359.181 (Build 官方) (64 bits) Linux
https://i.stack.imgur.com/shBNk.jpg
Opera 53.0.2907.37 Linux
https://i.stack.imgur.com/bcnwH.jpg
如果您希望 jQuery 处理 DOM 中的所有 svg 元素并且您的 DOM 大小合理，那么所选的解决方案很好。但是如果你的 DOM 很大，并且你决定动态加载 DOM 的一部分，那么仅仅为了更新 svg 元素就必须重新扫描整个 DOM 是没有意义的。相反，请使用 jQuery 插件来执行此操作：
/**
* A jQuery plugin that loads an svg file and replaces the jQuery object with its contents.
*
* The path to the svg file is specified in the src attribute (which normally does not exist for an svg element).
*
* The width, height and class attributes in the loaded svg will be replaced by those that exist in the jQuery object's
* underlying html. Note: All other attributes in the original element are lost including the style attribute. Place
* any styles in a style class instead.
*/
(function ($) {
$.fn.svgLoader = function () {
var src = $(this).attr("src");
var width = this.attr("width");
var height = this.attr("height");
var cls = this.attr("class");
var ctx = $(this);
// Get the svg file and replace the <svg> element.
$.ajax({
url: src,
cache: false
}).done(function (html) {
let svg = $(html);
svg.attr("width", width);
svg.attr("height", height);
svg.attr("class", cls);
var newHtml = $('<a></a>').append(svg.clone()).html();
ctx.replaceWith(newHtml);
});
return this;
};
}(jQuery));
在您的 html 中，指定一个 svg 元素，如下所示：
<svg src="images/someSvgFile.svg" height="45" width="45" class="mySVGClass"/>
并应用插件：
$(".mySVGClass").svgLoader();
对于 :hover 事件动画，我们可以将样式留在 svg 文件中，例如
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
rect {
fill:rgb(165,225,75);
stroke:none;
transition: 550ms ease-in-out;
transform-origin:125px 125px;
}
rect:hover {
fill:rgb(75,165,225);
transform:rotate(360deg);
}
</style>
</defs>
<rect x='50' y='50' width='150' height='150'/>
</svg>
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(3,122,247)' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}
更改颜色：填充='rgb(3,122,247)'
关注公众号
不定期副业成功案例分享
});替换为}, 'xml');img[src$=".svg"]并消除对svg类的需要。