Javascript 当SVG'；它被用作背景图像吗？

所以这里有一个独特的问题，当我的SVG作为一个工具使用时，不确定如何定位和更改它的填充颜色。在我的例子中，单击将类myGreen替换为myGray

html

当前jQuery

$("#icon_phone").unbind('click').bind('click', function () {
    //$(this).css('background', 'none');
});

Illustrator创建的SVG代码

<?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">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="15px" height="28px" viewBox="0 0 15 28" enable-background="new 0 0 15 28" xml:space="preserve">

 <style type="text/css" >
  <![CDATA[

    path.myGreen {
       fill: #39B54A;
    }
    path.myGray {
        fill: #e2e2e2;
    }

  ]]>
</style>

<path class="myGreen" d="M12.861,0H2.144C0.965,0,0,1.03,0,2.287v22.556c0,1.259,0.965,2.287,2.144,2.287h10.717
c1.179,0,2.144-1.029,2.144-2.287V2.287C15.005,1.03,14.04,0,12.861,0z M5.721,2.137h3.572c0.236,0,0.305,0.537,0.305,0.79
c0,0.253-0.069,0.639-0.305,0.639H5.721c-0.236,0-0.206-0.386-0.206-0.639C5.515,2.675,5.485,2.137,5.721,2.137z M7.52,26.16
c-0.711,0-1.287-0.614-1.287-1.373c0-0.758,0.576-1.373,1.287-1.373c0.711,0,1.287,0.615,1.287,1.373
C8.808,25.546,8.231,26.16,7.52,26.16z M13.578,22.139H1.434V4.995h12.144V22.139z"/>

我在这里了解了如何将类添加到svg文件中：

---

创建一个灰色背景图像文件，然后单击更改背景URL以指向备用图像

---

创建一个灰色背景图像文件，然后单击更改背景URL以指向备用图像

---

或者如果要在浏览器中执行此操作，请尝试：

var green = '3CB54A';
var red = 'ED1F24';
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';      
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";

var green='3CB54A'；
变量red='ED1F24'；
var svg=''；
var encoded=window.btoa（svg）；
document.body.style.background=“url（数据：image/svg+xml；base64，“+encoded+”）；

---

或者如果要在浏览器中执行此操作，请尝试：

var green = '3CB54A';
var red = 'ED1F24';
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';      
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";

var green='3CB54A'；
变量red='ED1F24'；
var svg=''；
var encoded=window.btoa（svg）；
document.body.style.background=“url（数据：image/svg+xml；base64，“+encoded+”）；

---

啊，谢谢你的准确回答。。。我正在开发一个web移动应用程序，以减少文件和请求的数量，这一点至关重要。我在这里和这里找到了一些更改SVG填充颜色的其他解决方案，但是我必须将img标记内部的SVG用作背景图像。图像标记与背景图像具有相同的限制。如果要直接操作数据，则需要一个

或

标记。这些解决方法所做的是将图像数据文件直接加载/克隆到文档中并在其中进行操作。啊，谢谢你的准确答案。。。我正在开发一个web移动应用程序，以减少文件和请求的数量，这一点至关重要。我在这里和这里找到了一些更改SVG填充颜色的其他解决方案，但是我必须将img标记内部的SVG用作背景图像。图像标记与背景图像具有相同的限制。如果要直接操作数据，则需要一个

或

标记。这些解决方法所做的是将图像数据文件直接加载/克隆到文档中并在其中进行操作。

var green = '3CB54A';
var red = 'ED1F24';
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';      
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";