这是一个自我提问；这是我想出的一段方便的代码
目前，没有一种简单的方法可以嵌入SVG图像，然后通过CSS访问SVG元素。使用JS SVG框架的方法多种多样，但是如果您所做的只是制作一个具有滚动状态的简单图标，那么这些方法就过于复杂了
这就是我想到的，我认为这是目前为止在网站上使用SVG文件最简单的方法。它的概念从早期的文本到图像替换方法，但据我所知，还没有为SVG做过
问题是：
如何在不使用JS-SVG框架的情况下在CSS中嵌入SVG并更改其颜色？
首先，在HTML中使用IMG标记嵌入SVG图形。我用Adobe Illustrator制作了这个图形
<；img id=“facebook徽标”class=“svg社交链接”src=”https://stackoverflow.com/images/logo-facebook.svg“/>；
这就像嵌入普通图像一样。请注意，您需要将IMG设置为具有svg类。“社会联系”课程只是为了举例。该ID不是必需的，但很有用
然后使用这个jQuery代码（在单独的文件中或在头部内联）
/**
*用内联SVG替换所有SVG图像
*/
jQuery（'img.svg'）。每个（函数（）{
var$img=jQuery（本）；
var imgID=$img.attr（'id'）；
var imgClass=$img.attr（'class'）；
var imgURL=$img.attr（'src'）；
get（imgURL，函数（数据）{
//获取SVG标记，忽略其余部分
var$svg=jQuery（data.find（'svg'）；
//将替换图像的ID添加到新SVG
如果（imgID的类型！==‘未定义’）{
$svg=$svg.attr（'id'，imgID）；
}
//将替换的图像类添加到新的SVG
if（imgClass的类型！==“未定义”）{
$svg=$svg.attr（'class'，imgClass+'replaced svg'）；
}
//根据删除所有无效的XML标记http://validator.w3.org
$svg=$svg.removeAttr（'xmlns:a'）；
//用新SVG替换图像
$img.replaceWith（$svg）；
}“xml”）；
});
上面的代码所做的是查找具有类“svg”的所有IMG，并将其替换为链接文件中的内联svg。它的巨大优势在于，现在可以使用CSS更改SVG的颜色，如下所示：
svg：悬停路径{
填充物：红色；
}
我编写的jQuery代码还跨原始图像ID和类提供端口。所以这个CSS也可以工作：
facebook徽标：悬停路径{
填充物：红色；
}
或：
。社交链接：悬停路径{
填充物：红色；
}
您可以在这里看到一个工作示例：
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